@trsys-tech/matrix-library 0.3.4 → 0.3.5

package/dist/datagrid.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\nconst appTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n});\r\n\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\ntype DataGridProps = {\r\n  children: React.ReactNode;\r\n};\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\ntype DataGridContentProps = AgGridReactProps & {};\r\n\r\nconst DataGridContent: React.FC<DataGridContentProps> = ({\r\n  theme: propTheme,\r\n  onGridReady,\r\n  quickFilterText: quickFilterTextProps,\r\n  rowData: rowDataProps,\r\n  containerStyle,\r\n  ...props\r\n}) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n  }\r\n  const { rowData, setRowData, actionbarExists, setApi, setQuickFilterText, quickFilterText, gridId, actionbarHeight } = context;\r\n\r\n  const theme = appTheme.withParams({\r\n    headerHeight: 40,\r\n    wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n  });\r\n\r\n  const handleGridReady = (e: GridReadyEvent) => {\r\n    setApi(e.api);\r\n    onGridReady?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setRowData(rowDataProps);\r\n  }, [rowDataProps, setRowData]);\r\n\r\n  React.useEffect(() => {\r\n    if (quickFilterTextProps !== undefined) {\r\n      setQuickFilterText(quickFilterTextProps ?? \"\");\r\n    }\r\n  }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n  return (\r\n    <AgGridReact\r\n      gridId={gridId}\r\n      theme={propTheme ?? theme}\r\n      rowData={rowData}\r\n      quickFilterText={quickFilterText}\r\n      onGridReady={handleGridReady}\r\n      containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype SearchActionProps = {\r\n  defaultOpen?: boolean;\r\n};\r\n\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isSearchInputOpen]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className=\"max-w-60\">\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startAdornment={\r\n            <IconButton variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endAdornment={\r\n            quickFilterText && (\r\n              <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype FreezeActionProps = ButtonProps & {\r\n  freezeText?: string;\r\n  unFreezeText?: string;\r\n};\r\n\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, rowData } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedNodes();\r\n\r\n    if (selectedRows.length > 0) {\r\n      // Pin the selected rows\r\n      api.setGridOption(\r\n        \"pinnedTopRowData\",\r\n        selectedRows.map(row => row.data),\r\n      );\r\n\r\n      // Get current row data\r\n      const allData = api.getRenderedNodes();\r\n      // Filter out pinned rows from the main data\r\n      const updatedNodes = allData.filter(row => !selectedRows.some(pinnedRow => pinnedRow.id === row.id));\r\n\r\n      // Update the grid with the filtered data\r\n      api.setGridOption(\r\n        \"rowData\",\r\n        updatedNodes.map(node => node.data),\r\n      );\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    if (!api) return;\r\n    api.setGridOption(\"pinnedTopRowData\", []);\r\n    api.setGridOption(\"rowData\", rowData);\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  refreshRowData: () => void;\r\n};\r\n\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, refreshRowData, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    refreshRowData();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  onDelete: () => void;\r\n};\r\n\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  children: React.ReactNode;\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n};\r\n"],"names":["appTheme","themeQuartz","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","props","theme","handleGridReady","e","AgGridReact","DataGridActionBar","className","ref","cn","SearchAction","defaultOpen","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","row","updatedNodes","pinnedRow","node","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","refreshRowData","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAAWC,EAAY,WAAW;AAAA,EACtC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,kBAAkB;AACpB,CAAC,GAgBKC,IAAkBC,EAAM,cAAsC,IAAI,GAElEC,IAAc,MAAM;AAClB,QAAAC,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,8CAA8C;AAGzD,SAAAA;AACT,GAMMC,KAAoC,CAAC,EAAE,UAAAC,QAAe;AACpD,QAAAC,IAASL,EAAM,MAAM,GACrB,CAACM,GAAKC,CAAM,IAAIP,EAAM,SAAyB,IAAI,GACnD,CAACQ,GAASC,CAAU,IAAIT,EAAM,SAAmC,CAAA,CAAE,GACnE,CAACU,GAAiBC,CAAkB,IAAIX,EAAM,SAAS,CAAC,GAExD,CAACY,GAAiBC,CAAkB,IAAIb,EAAM,SAAS,EAAE,GACzD,CAACc,GAAiBC,CAAkB,IAAIf,EAAM,SAAS,EAAK;AAEhE,SAAA,gBAAAgB;AAAA,IAACjB,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAO;AAAA,QACL,KAAAO;AAAA,QACA,QAAAC;AAAA,QACA,SAAAC;AAAA,QACA,YAAAC;AAAA,QACA,QAAAJ;AAAA,QACA,iBAAAO;AAAA,QACA,oBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,oBAAAC;AAAA,QACA,iBAAAL;AAAA,QACA,oBAAAC;AAAA,MACF;AAAA,MAEC,UAAAP;AAAA,IAAA;AAAA,EACH;AAEJ,GAIMa,KAAkD,CAAC;AAAA,EACvD,OAAOC;AAAA,EACP,aAAAC;AAAA,EACA,iBAAiBC;AAAA,EACjB,SAASC;AAAA,EACT,gBAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,kDAAkD;AAE9D,QAAA,EAAE,SAAAM,GAAS,YAAAC,GAAY,iBAAAK,GAAiB,QAAAP,GAAQ,oBAAAM,GAAoB,iBAAAD,GAAiB,QAAAP,GAAQ,iBAAAK,EAAA,IAAoBR,GAEjHsB,IAAQ3B,EAAS,WAAW;AAAA,IAChC,cAAc;AAAA,IACd,qBAAqBiB,IAAkB,oBAAoB;AAAA,EAAA,CAC5D,GAEKW,IAAkB,CAACC,MAAsB;AAC7C,IAAAnB,EAAOmB,EAAE,GAAG,GACZP,IAAcO,CAAC;AAAA,EACjB;AAEA1B,SAAAA,EAAM,UAAU,MAAM;AACpB,IAAAS,EAAWY,CAAY;AAAA,EAAA,GACtB,CAACA,GAAcZ,CAAU,CAAC,GAE7BT,EAAM,UAAU,MAAM;AACpB,IAAIoB,MAAyB,UAC3BP,EAAmBO,KAAwB,EAAE;AAAA,EAC/C,GACC,CAACA,GAAsBP,CAAkB,CAAC,GAG3C,gBAAAG;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,QAAAtB;AAAA,MACA,OAAOa,KAAaM;AAAA,MACpB,SAAAhB;AAAA,MACA,iBAAAI;AAAA,MACA,aAAaa;AAAA,MACb,gBAAgB,EAAE,QAAQ,eAAef,CAAe,OAAO,GAAGY,EAAe;AAAA,MAChF,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ,GAIMK,KAAsD,CAAC,EAAE,WAAAC,GAAW,GAAGN,QAAY;AACjF,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,oDAAoD;AAEhE,QAAA4B,IAAM9B,EAAM,OAA8B,IAAI,GAC9C,EAAE,oBAAAe,GAAoB,oBAAAJ,EAAA,IAAuBT,GAC7C,EAAE,UAAAE,MAAamB;AAErBvB,SAAAA,EAAM,UAAU,OACde,EAAmB,EAAI,GAChB,MAAMA,EAAmB,EAAK,IACpC,CAACA,CAAkB,CAAC,GAEvBf,EAAM,UAAU,MAAM;AACpB,IAAI8B,EAAI,WACanB,EAAAmB,EAAI,QAAQ,YAAY;AAAA,EAC7C,GACC,CAACnB,CAAkB,CAAC,GAGrB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWe;AAAA,QACT;AAAA,QACAF;AAAA,MACF;AAAA,MACA,KAAAC;AAAA,MAEC,UAAA1B;AAAA,IAAA;AAAA,EACH;AAEJ,GAMM4B,KAA4C,CAAC,EAAE,aAAAC,IAAc,SAAY;AACvE,QAAA/B,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,+CAA+C;AAG3D,QAAA,EAAE,iBAAAU,GAAiB,oBAAAC,EAAA,IAAuBX,GAE1C,CAACgC,GAAmBC,CAAoB,IAAInC,EAAM,SAASiC,CAAW,GACtE,CAACG,GAAWC,CAAY,IAAIrC,EAAM,SAAS,EAAK,GAChDsC,IAAWtC,EAAM,OAAgC,IAAI,GAErDuC,IAAc,MAAM;AACxB,IAAArC,EAAQ,mBAAmB,EAAE,GACzBoC,EAAS,WACXA,EAAS,QAAQ,MAAM;AAAA,EAE3B,GAEME,IAAa,MAAM;AACvB,IAAAL,EAAqB,EAAI;AAAA,EAC3B;AAEAnC,EAAAA,EAAM,UAAU,MAAM;AAChB,IAAAkC,KAAqBI,GAAU,WACjCA,EAAS,QAAQ,MAAM;AAAA,EACzB,GACC,CAACJ,CAAiB,CAAC;AAEtB,QAAMO,IAAc,MAAM;AACxB,IAAAJ,EAAa,EAAI,GACjBnC,EAAQ,mBAAmB,EAAE,GAC7B,WAAW,MAAM;AACf,MAAAiC,EAAqB,EAAK,GAC1BE,EAAa,EAAK;AAAA,OACjB,GAAG;AAAA,EACR;AAEA,SACG,gBAAArB,EAAA,OAAA,EAAI,WAAU,YACZ,eAAqBoB,IACpB,gBAAApB;AAAA,IAAC0B;AAAA,IAAA;AAAA,MACC,KAAKJ;AAAA,MACL,WAAWP,EAAG,kBAAkBG,KAAqB,CAACE,IAAY,uBAAuB,IAAIA,KAAa,qBAAqB;AAAA,MAC/H,UAAU,CAAAV,MAAKb,EAAmBa,EAAE,OAAO,KAAK;AAAA,MAChD,OAAOd;AAAA,MACP,gBACE,gBAAAI,EAAC2B,GAAW,EAAA,SAAQ,WAAU,WAAU,kCAAiC,SAASF,GAChF,UAAA,gBAAAzB,EAAC4B,GAAU,EAAA,WAAU,UAAU,CAAA,GACjC;AAAA,MAEF,cACEhC,KACG,gBAAAI,EAAA2B,GAAA,EAAW,SAAQ,WAAU,WAAU,kCAAiC,SAASJ,GAChF,UAAA,gBAAAvB,EAAC6B,GAAY,EAAA,WAAU,WAAU,EACnC,CAAA;AAAA,IAAA;AAAA,EAAA,IAKN,gBAAA7B,EAAC2B,GAAW,EAAA,SAAQ,WAAU,WAAU,qBAAoB,SAASH,GACnE,UAAC,gBAAAxB,EAAA4B,GAAA,EAAU,WAAU,UAAU,CAAA,EACjC,CAAA,GAEJ;AAEJ,GAOME,KAA4C,CAAC,EAAE,YAAAC,GAAY,cAAAC,GAAc,SAAAC,GAAS,UAAAC,GAAU,GAAG3B,QAAY;AACzG,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,+CAA+C;AAGjE,QAAM,CAACiD,GAAgBC,CAAiB,IAAIpD,EAAM,SAAS,CAAC,GACtD,CAACqD,GAAmBC,CAAoB,IAAItD,EAAM,SAAS,CAAC,GAE5D,EAAE,KAAAM,GAAK,SAAAE,EAAA,IAAYN,GAEnBqD,IAAa,MAAM;AACvB,QAAI,CAACjD,EAAK;AAGJ,UAAAkD,IAAelD,EAAI,iBAAiB;AAEtC,QAAAkD,EAAa,SAAS,GAAG;AAEvB,MAAAlD,EAAA;AAAA,QACF;AAAA,QACAkD,EAAa,IAAI,CAAOC,MAAAA,EAAI,IAAI;AAAA,MAClC;AAKA,YAAMC,IAFUpD,EAAI,iBAAiB,EAER,OAAO,CAAAmD,MAAO,CAACD,EAAa,KAAK,CAAAG,MAAaA,EAAU,OAAOF,EAAI,EAAE,CAAC;AAG/F,MAAAnD,EAAA;AAAA,QACF;AAAA,QACAoD,EAAa,IAAI,CAAQE,MAAAA,EAAK,IAAI;AAAA,MACpC;AAAA,IAAA;AAAA,EAEJ,GAEMC,IAAe,MAAM;AACzB,IAAKvD,MACDA,EAAA,cAAc,oBAAoB,EAAE,GACpCA,EAAA,cAAc,WAAWE,CAAO;AAAA,EACtC,GAEMsD,IAAiB,CAACpC,MAA2C;AACjE,IAAIpB,MACsBA,EAAI,qBAAqB,IAC3B,IACPuD,EAAA,IAEFN,EAAA,IAGfN,IAAUvB,CAAC;AAAA,EACb;AAEA1B,SAAAA,EAAM,UAAU,OACTM,GAAA,iBAAiB,wBAAwB,MAAM;AAChC,IAAA8C,EAAA9C,EAAI,sBAAsB;AAAA,EAAA,CAC7C,GAEIA,GAAA,iBAAiB,oBAAoB,MAAM;AACzB,IAAAgD,EAAAhD,EAAI,iBAAiB,EAAE,MAAM;AAAA,EAAA,CACnD,GAEM,MAAM;AACN,IAAAA,GAAA,oBAAoB,wBAAwB,MAAM;AACnC,MAAA8C,EAAA9C,EAAI,sBAAsB;AAAA,IAAA,CAC7C,GAEIA,GAAA,oBAAoB,oBAAoB,MAAM;AAC5B,MAAAgD,EAAAhD,EAAI,iBAAiB,EAAE,MAAM;AAAA,IAAA,CACnD;AAAA,EACH,IACC,CAACA,CAAG,CAAC,GAGN,gBAAAU;AAAA,IAAC+C;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAASD;AAAA,MACT,WAAW,gBAAA9C,EAACgD,GAAU,EAAA,WAAU,cAAc,CAAA;AAAA,MAC9C,UAAW,CAACb,KAAkB,CAACE,KAAsBH;AAAA,MACpD,GAAG3B;AAAA,MAEH,UAAA4B,IAAkBH,KAAgB,aAAeD,KAAc;AAAA,IAAA;AAAA,EAClE;AAEJ,GAIMkB,KAA0C,CAAC,EAAE,UAAA7D,GAAU,WAAAyB,GAAW,SAAAoB,GAAS,GAAG1B,QAAY;AACxF,QAAArB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,8CAA8C;AAG1D,QAAAgE,IAAc,CAACxC,MAA2C;AAC9D,IAAIxB,EAAQ,QACFA,EAAA,IAAI,cAAc,aAAa,OAAO,GAE9C,WAAW,MAAM;AACf,YAAMiE,IAAU,SAAS,cAAc,eAAejE,EAAQ,SAAS,IAAI,GAErEkE,IAAO;AAAA,UADE,SAAS,KAEf,SAAS;AAAA,UAChBD,EAAQ,SAAS;AAAA;AAEnB,MAAAE,EAAUD,CAAI,GACLlE,GAAA,KAAK,cAAc,aAAa,MAAS;AAAA,IAAA,CACnD,IAEH+C,IAAUvB,CAAC;AAAA,EACb;AAEA,2BACGiB,GAAW,EAAA,SAAQ,WAAU,WAAWZ,EAAG,iBAAiBF,CAAS,GAAG,SAASqC,GAAc,GAAG3C,GAChG,UAAAnB,uBAAakE,GAAM,EAAA,WAAU,UAAU,CAAA,GAC1C;AAEJ,GAMMC,KAA8C,CAAC,EAAE,WAAA1C,GAAW,gBAAA2C,GAAgB,UAAApE,GAAU,SAAAqE,GAAS,GAAGlD,QAAY;AAGlH,MAAI,CAFYvB,EAAM,WAAWD,CAAe;AAGxC,UAAA,IAAI,MAAM,gDAAgD;AAGlE,QAAM2E,IAAgB,MAAM;AACX,IAAAF,EAAA;AAAA,EACjB;AAGE,SAAA,gBAAAxD;AAAA,IAAC2B;AAAA,IAAA;AAAA,MACC,WAAWZ,EAAG,iBAAiB0C,KAAW,2BAA2B5C,CAAS;AAAA,MAC9E,SAAQ;AAAA,MACR,SAAS6C;AAAA,MACT,UAAUD;AAAA,MACT,GAAGlD;AAAA,MAEH,UAAAnB,uBAAauE,GAAQ,EAAA,WAAW5C,EAAG,eAAe0C,KAAW,cAAc,EAAG,CAAA;AAAA,IAAA;AAAA,EACjF;AAEJ,GAMMG,KAA4C,CAAC,EAAE,UAAAC,GAAU,UAAAzE,GAAU,GAAGmB,QAMvE,gBAAAP,EAAA+C,GAAA,EAAO,SAAQ,UAAS,SALN,MAAM;AAChB,EAAAc,EAAA;AACX,GAGkD,WAAY,gBAAA7D,EAAA8D,GAAA,EAAS,WAAU,cAAA,CAAc,GAAK,GAAGvD,GAClG,UAAAnB,GACH,GAYE2E,KAA4C,CAAC,EAAE,UAAA3E,GAAU,WAAA4E,GAAW,WAAAnD,GAAW,GAAGN,0BAEnF0D,GAAS,EAAA,GAAID,GAAW,gBAAgB,CACvC,GAAA,UAAA;AAAA,EAAC,gBAAAhE,EAAAkE,GAAA,EAAgB,GAAIF,GAAW,gBAAgB,IAC9C,UAAC,gBAAAhE,EAAAmE,GAAA,EAAgB,WAAU,2BAAA,CAA2B,EACxD,CAAA;AAAA,EACA,gBAAAnE,EAACoE,GAAe,EAAA,OAAM,OAAM,WAAWrD,EAAG,QAAQF,CAAS,GAAI,GAAGN,GAC/D,UAAAnB,EACH,CAAA;AAAA,GACF;"}
+{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { HTMLAttributes } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\nconst appTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n});\r\n\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\ntype DataGridProps = {\r\n  children: React.ReactNode;\r\n};\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\ntype DataGridContentProps = AgGridReactProps & {};\r\n\r\nconst DataGridContent: React.FC<DataGridContentProps> = ({\r\n  theme: propTheme,\r\n  onGridReady,\r\n  quickFilterText: quickFilterTextProps,\r\n  rowData: rowDataProps,\r\n  containerStyle,\r\n  ...props\r\n}) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n  }\r\n  const { rowData, setRowData, actionbarExists, setApi, setQuickFilterText, quickFilterText, gridId, actionbarHeight } = context;\r\n\r\n  const theme = appTheme.withParams({\r\n    headerHeight: 40,\r\n    wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n  });\r\n\r\n  const handleGridReady = (e: GridReadyEvent) => {\r\n    setApi(e.api);\r\n    onGridReady?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setRowData(rowDataProps);\r\n  }, [rowDataProps, setRowData]);\r\n\r\n  React.useEffect(() => {\r\n    if (quickFilterTextProps !== undefined) {\r\n      setQuickFilterText(quickFilterTextProps ?? \"\");\r\n    }\r\n  }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n  return (\r\n    <AgGridReact\r\n      gridId={gridId}\r\n      theme={propTheme ?? theme}\r\n      rowData={rowData}\r\n      quickFilterText={quickFilterText}\r\n      onGridReady={handleGridReady}\r\n      containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype SearchActionProps = {\r\n  defaultOpen?: boolean;\r\n};\r\n\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isSearchInputOpen]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className=\"max-w-60\">\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startAdornment={\r\n            <IconButton variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endAdornment={\r\n            quickFilterText && (\r\n              <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype FreezeActionProps = ButtonProps & {\r\n  freezeText?: string;\r\n  unFreezeText?: string;\r\n};\r\n\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, rowData } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedNodes();\r\n\r\n    if (selectedRows.length > 0) {\r\n      // Pin the selected rows\r\n      api.setGridOption(\r\n        \"pinnedTopRowData\",\r\n        selectedRows.map(row => row.data),\r\n      );\r\n\r\n      // Get current row data\r\n      const allData = api.getRenderedNodes();\r\n      // Filter out pinned rows from the main data\r\n      const updatedNodes = allData.filter(row => !selectedRows.some(pinnedRow => pinnedRow.id === row.id));\r\n\r\n      // Update the grid with the filtered data\r\n      api.setGridOption(\r\n        \"rowData\",\r\n        updatedNodes.map(node => node.data),\r\n      );\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    if (!api) return;\r\n    api.setGridOption(\"pinnedTopRowData\", []);\r\n    api.setGridOption(\"rowData\", rowData);\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  refreshRowData: () => void;\r\n};\r\n\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, refreshRowData, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    refreshRowData();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  onDelete: () => void;\r\n};\r\n\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  children: React.ReactNode;\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n};\r\n"],"names":["appTheme","themeQuartz","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","props","theme","handleGridReady","e","AgGridReact","DataGridActionBar","className","ref","cn","SearchAction","defaultOpen","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","row","updatedNodes","pinnedRow","node","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","refreshRowData","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":"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"}

package/dist/datepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.es.js","sources":["../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { DesktopDatePicker, DesktopDatePickerProps } from \"./DesktopDatePicker\";\r\nimport { MobileDatePicker, MobileDatePickerProps } from \"./MobileDatePicker\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\ntype DatePickerProps = DesktopDatePickerProps & MobileDatePickerProps & {};\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = props => {\r\n  const isMobile = useIsMobile();\r\n\r\n  return isMobile ? <MobileDatePicker {...props} /> : <DesktopDatePicker {...props} />;\r\n};\r\n\r\nexport { DatePicker, DesktopDatePicker, MobileDatePicker, type DatePickerProps, type DesktopDatePickerProps, type MobileDatePickerProps };\r\n"],"names":["DatePicker","props","useIsMobile","MobileDatePicker","jsx","DesktopDatePicker"],"mappings":";;;;AAOA,MAAMA,IAAwC,CAASC,MACpCC,EAAY,sBAEVC,GAAkB,EAAA,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAmB,EAAA,GAAGJ,EAAO,CAAA;"}
+{"version":3,"file":"datepicker.es.js","sources":["../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { DesktopDatePicker, DesktopDatePickerProps } from \"./DesktopDatePicker\";\r\nimport { MobileDatePicker, MobileDatePickerProps } from \"./MobileDatePicker\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\ntype DatePickerProps = DesktopDatePickerProps & MobileDatePickerProps & {};\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = props => {\r\n  const isMobile = useIsMobile();\r\n\r\n  return isMobile ? <MobileDatePicker {...props} /> : <DesktopDatePicker {...props} />;\r\n};\r\n\r\nexport { DatePicker, DesktopDatePicker, MobileDatePicker, type DatePickerProps, type DesktopDatePickerProps, type MobileDatePickerProps };\r\n"],"names":["DatePicker","props","useIsMobile","MobileDatePicker","jsx","DesktopDatePicker"],"mappings":";;;;AASA,MAAMA,IAAwC,CAASC,MACpCC,EAAY,sBAEVC,GAAkB,EAAA,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAmB,EAAA,GAAGJ,EAAO,CAAA;"}

package/dist/daterangepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"daterangepicker.es.js","sources":["../src/components/date-picker/DateRangePicker.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\nimport { MobileDateRangePicker, MobileDateRangePickerProps } from \"./MobileDateRangePicker\";\r\nimport { DesktopDateRangePicker, DesktopDateRangePickerProps } from \"./DesktopDateRangePicker\";\r\n\r\ntype DateRangePickerProps = DesktopDateRangePickerProps & MobileDateRangePickerProps & {};\r\n\r\nconst DateRangePicker: React.FC<DateRangePickerProps> = props => {\r\n  const isMobile = useIsMobile();\r\n\r\n  return isMobile ? <MobileDateRangePicker {...props} /> : <DesktopDateRangePicker {...props} />;\r\n};\r\n\r\nexport {\r\n  DateRangePicker,\r\n  DesktopDateRangePicker,\r\n  MobileDateRangePicker,\r\n  type DateRangePickerProps,\r\n  type DesktopDateRangePickerProps,\r\n  type MobileDateRangePickerProps,\r\n};\r\n"],"names":["DateRangePicker","props","useIsMobile","MobileDateRangePicker","jsx","DesktopDateRangePicker"],"mappings":";;;;AAQA,MAAMA,IAAkD,CAASC,MAC9CC,EAAY,sBAEVC,GAAuB,EAAA,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAwB,EAAA,GAAGJ,EAAO,CAAA;"}
+{"version":3,"file":"daterangepicker.es.js","sources":["../src/components/date-picker/DateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\nimport { MobileDateRangePicker, MobileDateRangePickerProps } from \"./MobileDateRangePicker\";\r\nimport { DesktopDateRangePicker, DesktopDateRangePickerProps } from \"./DesktopDateRangePicker\";\r\n\r\ntype DateRangePickerProps = DesktopDateRangePickerProps & MobileDateRangePickerProps & {};\r\n\r\nconst DateRangePicker: React.FC<DateRangePickerProps> = props => {\r\n  const isMobile = useIsMobile();\r\n\r\n  return isMobile ? <MobileDateRangePicker {...props} /> : <DesktopDateRangePicker {...props} />;\r\n};\r\n\r\nexport {\r\n  DateRangePicker,\r\n  DesktopDateRangePicker,\r\n  MobileDateRangePicker,\r\n  type DateRangePickerProps,\r\n  type DesktopDateRangePickerProps,\r\n  type MobileDateRangePickerProps,\r\n};\r\n"],"names":["DateRangePicker","props","useIsMobile","MobileDateRangePicker","jsx","DesktopDateRangePicker"],"mappings":";;;;AAUA,MAAMA,IAAkD,CAASC,MAC9CC,EAAY,sBAEVC,GAAuB,EAAA,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAwB,EAAA,GAAGJ,EAAO,CAAA;"}

package/dist/desktopdatepicker.es.js

@@ -1,52 +1,52 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import * as C from "react";
-import { Calendar as k } from "@trsys-tech/matrix-icons";
-import { cn as x } from "./utils.es.js";
-import { Calendar as P } from "./calendar.es.js";
-import { Button as v } from "./button.es.js";
-import { Popover as D, PopoverTrigger as b, PopoverContent as M } from "./popover.es.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as h from "react";
+import { Calendar as x } from "@trsys-tech/matrix-icons";
+import { cn as v } from "./utils.es.js";
+import { Calendar as C } from "./calendar.es.js";
+import { Button as k } from "./button.es.js";
+import { Popover as w, PopoverTrigger as P, PopoverContent as D } from "./popover.es.js";
 import { formatDate as n } from "./format.es.js";
 const L = ({
-  formatStr: o,
-  selected: a,
-  placeholder: i,
-  className: s,
-  calendarClassName: m,
+  formatStr: a,
+  selected: r,
+  placeholder: s,
+  className: d,
+  calendarClassName: i,
   closeOnSelect: p,
-  onDayClick: d,
-  disabled: l,
+  onDayClick: l,
+  disabled: m,
   ...c
 }) => {
-  const [f, t] = C.useState(!1), y = (u, g, h) => {
-    d?.(u, g, h), p && t(!1);
+  const [f, o] = h.useState(!1), u = (y, b, g) => {
+    l?.(y, b, g), p && o(!1);
   };
-  return /* @__PURE__ */ e(D, { open: f, onOpenChange: t, children: [
-    /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ e(
-      v,
+  return /* @__PURE__ */ t(w, { open: f, onOpenChange: o, children: [
+    /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ t(
+      k,
       {
-        variant: "outline",
-        className: x(
-          "w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100",
-          !a && "text-muted-foreground",
-          s
+        variant: "text",
+        className: v(
+          "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
+          d
         ),
-        "aria-label": a ? `Selected date: ${n(a, o ?? "yyyy/MM/dd")}` : "Pick a date",
-        disabled: l,
+        "data-placeholder": r ? void 0 : "",
+        "aria-label": r ? `Selected date: ${n(r, a ?? "yyyy/MM/dd")}` : "Pick a date",
+        disabled: m,
         children: [
-          a ? n(a, o ?? "yyyy/MM/dd") : /* @__PURE__ */ r("span", { children: i ?? "Pick a date" }),
-          /* @__PURE__ */ r(k, { className: "mr-2 ms-auto" })
+          r ? n(r, a ?? "yyyy/MM/dd") : /* @__PURE__ */ e("span", { children: s ?? "Pick a date" }),
+          /* @__PURE__ */ e(x, { className: "mr-2 ms-auto" })
         ]
       }
     ) }),
-    /* @__PURE__ */ r(M, { className: "w-auto p-0", children: /* @__PURE__ */ r(
-      P,
+    /* @__PURE__ */ e(D, { className: "w-auto p-0", children: /* @__PURE__ */ e(
+      C,
       {
         ...c,
         mode: "single",
-        selected: a,
+        selected: r,
         captionLayout: "dropdown-years",
-        className: m,
-        onDayClick: y
+        className: i,
+        onDayClick: u
       }
     ) })
   ] });

package/dist/desktopdatepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    closeOnSelect?: boolean;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  closeOnSelect,\r\n  onDayClick,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (closeOnSelect) setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\r\n            \"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100\",\r\n            !selected && \"text-muted-foreground\",\r\n            className,\r\n          )}\r\n          aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n          disabled={disabled}\r\n        >\r\n          {selected ? format(selected, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n          <CalendarIcon className=\"mr-2 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\">\r\n        <Calendar\r\n          {...props}\r\n          mode=\"single\"\r\n          selected={selected}\r\n          captionLayout=\"dropdown-years\"\r\n          className={calendarClassName}\r\n          onDayClick={handleDayClick}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onDayClick","disabled","props","isOpen","setIsOpen","React","handleDayClick","date","modifiers","e","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAE1CC,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACxF,IAAAT,IAAAO,GAAMC,GAAWC,CAAC,GAC3BV,OAAyB,EAAK;AAAA,EACpC;AAEA,SACG,gBAAAW,EAAAC,GAAA,EAAQ,MAAMR,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAQ,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA,CAACpB,KAAY;AAAA,UACbE;AAAA,QACF;AAAA,QACA,cAAYF,IAAW,kBAAkBqB,EAAOrB,GAAUD,KAAa,YAAY,CAAC,KAAK;AAAA,QACzF,UAAAO;AAAA,QAEC,UAAA;AAAA,UAAWN,IAAAqB,EAAOrB,GAAUD,KAAa,YAAY,IAAK,gBAAAkB,EAAA,QAAA,EAAM,eAAe,cAAc,CAAA;AAAA,UAC9F,gBAAAA,EAACK,GAAa,EAAA,WAAU,eAAe,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAL,EAACM,GAAe,EAAA,WAAU,cACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACE,GAAGjB;AAAA,QACJ,MAAK;AAAA,QACL,UAAAP;AAAA,QACA,eAAc;AAAA,QACd,WAAWG;AAAA,QACX,YAAYQ;AAAA,MAAA;AAAA,IAAA,EAEhB,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    closeOnSelect?: boolean;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  closeOnSelect,\r\n  onDayClick,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (closeOnSelect) setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selected ? \"\" : undefined}\r\n          aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n          disabled={disabled}\r\n        >\r\n          {selected ? format(selected, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n          <CalendarIcon className=\"mr-2 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\">\r\n        <Calendar\r\n          {...props}\r\n          mode=\"single\"\r\n          selected={selected}\r\n          captionLayout=\"dropdown-years\"\r\n          className={calendarClassName}\r\n          onDayClick={handleDayClick}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onDayClick","disabled","props","isOpen","setIsOpen","React","handleDayClick","date","modifiers","e","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAE1CC,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACxF,IAAAT,IAAAO,GAAMC,GAAWC,CAAC,GAC3BV,OAAyB,EAAK;AAAA,EACpC;AAEA,SACG,gBAAAW,EAAAC,GAAA,EAAQ,MAAMR,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAQ,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAlB;AAAA,QACF;AAAA,QACA,oBAAmBF,IAAgB,SAAL;AAAA,QAC9B,cAAYA,IAAW,kBAAkBqB,EAAOrB,GAAUD,KAAa,YAAY,CAAC,KAAK;AAAA,QACzF,UAAAO;AAAA,QAEC,UAAA;AAAA,UAAWN,IAAAqB,EAAOrB,GAAUD,KAAa,YAAY,IAAK,gBAAAkB,EAAA,QAAA,EAAM,eAAe,cAAc,CAAA;AAAA,UAC9F,gBAAAA,EAACK,GAAa,EAAA,WAAU,eAAe,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAL,EAACM,GAAe,EAAA,WAAU,cACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACE,GAAGjB;AAAA,QACJ,MAAK;AAAA,QACL,UAAAP;AAAA,QACA,eAAc;AAAA,QACd,WAAWG;AAAA,QACX,YAAYQ;AAAA,MAAA;AAAA,IAAA,EAEhB,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/desktopdaterangepicker.es.js

@@ -1,61 +1,61 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import * as c from "react";
-import { Calendar as h } from "@trsys-tech/matrix-icons";
-import { cn as m } from "./utils.es.js";
-import { Calendar as M } from "./calendar.es.js";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import * as g from "react";
+import { Calendar as b } from "@trsys-tech/matrix-icons";
+import { cn as i } from "./utils.es.js";
+import { Calendar as h } from "./calendar.es.js";
 import { Button as x } from "./button.es.js";
-import { Popover as v, PopoverTrigger as C, PopoverContent as b } from "./popover.es.js";
+import { Popover as v, PopoverTrigger as w, PopoverContent as M } from "./popover.es.js";
 import { formatDate as t } from "./format.es.js";
 const R = ({
-  formatStr: n,
+  formatStr: e,
   selected: r,
-  placeholder: i,
+  placeholder: n,
   className: s,
-  calendarClassName: e,
-  fromText: d,
+  calendarClassName: d,
+  fromText: m,
   toText: p,
-  disabled: f,
-  ...y
+  disabled: l,
+  ...f
 }) => {
-  const [l, g] = c.useState(!1);
-  return /* @__PURE__ */ a(
+  const [y, u] = g.useState(!1);
+  return /* @__PURE__ */ o(
     v,
     {
-      open: l,
-      onOpenChange: (u) => {
-        g(u);
+      open: y,
+      onOpenChange: (c) => {
+        u(c);
       },
       children: [
-        /* @__PURE__ */ o(C, { asChild: !0, children: /* @__PURE__ */ a(
+        /* @__PURE__ */ a(w, { asChild: !0, children: /* @__PURE__ */ o(
           x,
           {
-            variant: "outline",
-            className: m(
-              "w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100",
-              !r && "text-muted-foreground",
+            variant: "text",
+            className: i(
+              "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
               s
             ),
-            "aria-label": r ? `Selected date: ${r?.from ? t(r.from, n ?? "yyyy/MM/dd") : ""} - ${r?.to ? t(r.to, n ?? "yyyy/MM/dd") : ""}` : i,
-            disabled: f,
+            "data-placeholder": r ? void 0 : "",
+            "aria-label": r ? `Selected date: ${r?.from ? t(r.from, e ?? "yyyy/MM/dd") : ""} - ${r?.to ? t(r.to, e ?? "yyyy/MM/dd") : ""}` : n,
+            disabled: l,
             children: [
-              r ? /* @__PURE__ */ a("div", { className: "grid grid-cols-2 flex-1 justify-items-start", children: [
-                /* @__PURE__ */ a("span", { children: [
-                  d ?? "From",
+              r ? /* @__PURE__ */ o("div", { className: "grid grid-cols-2 flex-1 justify-items-start", children: [
+                /* @__PURE__ */ o("span", { children: [
+                  m ?? "From",
                   ": ",
-                  r?.from ? t(r.from, n ?? "yyyy/MM/dd") : "-"
+                  r?.from ? t(r.from, e ?? "yyyy/MM/dd") : "-"
                 ] }),
                 " ",
-                /* @__PURE__ */ a("span", { children: [
+                /* @__PURE__ */ o("span", { children: [
                   p ?? "To",
                   ": ",
-                  r?.to ? t(r.to, n ?? "yyyy/MM/dd") : "-"
+                  r?.to ? t(r.to, e ?? "yyyy/MM/dd") : "-"
                 ] })
-              ] }) : /* @__PURE__ */ o("span", { children: i ?? "Pick a Range" }),
-              /* @__PURE__ */ o(h, { className: "mr-2 h-5 w-4 ms-auto" })
+              ] }) : /* @__PURE__ */ a("span", { children: n ?? "Pick a Range" }),
+              /* @__PURE__ */ a(b, { className: "mr-2 h-5 w-4 ms-auto" })
             ]
           }
         ) }),
-        /* @__PURE__ */ o(b, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ o(M, { ...y, mode: "range", selected: r, className: m(e, "md:max-w-full md:w-[36rem]"), numberOfMonths: 2 }) })
+        /* @__PURE__ */ a(M, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ a(h, { ...f, mode: "range", selected: r, className: i(d, "md:max-w-full md:w-[36rem]"), numberOfMonths: 2 }) })
       ]
     }
   );

package/dist/desktopdaterangepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\r\n            \"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100\",\r\n            !selected && \"text-muted-foreground\",\r\n            className,\r\n          )}\r\n          aria-label={\r\n            selected\r\n              ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n              : placeholder\r\n          }\r\n          disabled={disabled}\r\n        >\r\n          {selected ? (\r\n            <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n              <span>\r\n                {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>{\" \"}\r\n              <span>\r\n                {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>\r\n            </div>\r\n          ) : (\r\n            <span>{placeholder ?? \"Pick a Range\"}</span>\r\n          )}\r\n          <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n        </Button>\r\n        {/* <div className=\"flex gap-2\">\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"From\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"To\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n        </div> */}\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n        <Calendar {...props} mode=\"range\" selected={selected} className={cn(calendarClassName, \"md:max-w-full md:w-[36rem]\")} numberOfMonths={2} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAG9C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAQK,MAAA;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAWC;AAAA,cACT;AAAA,cACA,CAACjB,KAAY;AAAA,cACbE;AAAA,YACF;AAAA,YACA,cACEF,IACI,kBAAkBA,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YAEC,UAAA;AAAA,cACCN,IAAA,gBAAAW,EAAC,OAAI,EAAA,WAAU,+CACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QACE,EAAA,UAAA;AAAA,kBAAYP,KAAA;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QACE,EAAA,UAAA;AAAA,kBAAUM,KAAA;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EACrF,CAAA;AAAA,cAAA,EACF,CAAA,IAEA,gBAAAe,EAAC,QAAM,EAAA,UAAAb,KAAe,gBAAe;AAAA,cAEvC,gBAAAa,EAACK,GAAa,EAAA,WAAU,uBAAuB,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GA0BnD;AAAA,QACA,gBAAAL,EAACM,KAAe,WAAU,cAAa,OAAM,SAC3C,UAAA,gBAAAN,EAACO,KAAU,GAAGd,GAAO,MAAK,SAAQ,UAAAP,GAAoB,WAAWiB,EAAGd,GAAmB,4BAA4B,GAAG,gBAAgB,GAAG,EAC3I,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selected ? \"\" : undefined}\r\n          aria-label={\r\n            selected\r\n              ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n              : placeholder\r\n          }\r\n          disabled={disabled}\r\n        >\r\n          {selected ? (\r\n            <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n              <span>\r\n                {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>{\" \"}\r\n              <span>\r\n                {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>\r\n            </div>\r\n          ) : (\r\n            <span>{placeholder ?? \"Pick a Range\"}</span>\r\n          )}\r\n          <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n        </Button>\r\n        {/* <div className=\"flex gap-2\">\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"From\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n          <Button\r\n            variant={\"outline\"}\r\n            className={cn(\r\n              \"border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start\",\r\n              !selected && \"text-muted-foreground\",\r\n              className,\r\n            )}\r\n          >\r\n            {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"To\"}</span>}\r\n            <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n          </Button>\r\n        </div> */}\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n        <Calendar {...props} mode=\"range\" selected={selected} className={cn(calendarClassName, \"md:max-w-full md:w-[36rem]\")} numberOfMonths={2} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAG9C,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAQK,MAAA;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAWC;AAAA,cACT;AAAA,cACAf;AAAA,YACF;AAAA,YACA,oBAAmBF,IAAgB,SAAL;AAAA,YAC9B,cACEA,IACI,kBAAkBA,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YAEC,UAAA;AAAA,cACCN,IAAA,gBAAAW,EAAC,OAAI,EAAA,WAAU,+CACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QACE,EAAA,UAAA;AAAA,kBAAYP,KAAA;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QACE,EAAA,UAAA;AAAA,kBAAUM,KAAA;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EACrF,CAAA;AAAA,cAAA,EACF,CAAA,IAEA,gBAAAe,EAAC,QAAM,EAAA,UAAAb,KAAe,gBAAe;AAAA,cAEvC,gBAAAa,EAACK,GAAa,EAAA,WAAU,uBAAuB,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GA0BnD;AAAA,QACA,gBAAAL,EAACM,KAAe,WAAU,cAAa,OAAM,SAC3C,UAAA,gBAAAN,EAACO,KAAU,GAAGd,GAAO,MAAK,SAAQ,UAAAP,GAAoB,WAAWiB,EAAGd,GAAmB,4BAA4B,GAAG,gBAAgB,GAAG,EAC3I,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/desktoptimepicker.es.js

@@ -1,33 +1,37 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import { useState as l } from "react";
-import { cn as n } from "./utils.es.js";
-import { Button as u } from "./button.es.js";
-import { TimePickerContent as d } from "./timepickercontent.es.js";
-import { Popover as f, PopoverTrigger as g, PopoverContent as h } from "./popover.es.js";
-const C = ({
-  time: r,
-  onTimeChange: a,
-  className: i,
-  slotsProps: e,
-  placeholder: p = "Pick a Time",
-  ...c
+import { cn as a } from "./utils.es.js";
+import { Button as m } from "./button.es.js";
+import { TimePickerContent as u } from "./timepickercontent.es.js";
+import { Popover as b, PopoverTrigger as f, PopoverContent as g } from "./popover.es.js";
+const $ = ({
+  time: e,
+  onTimeChange: n,
+  className: d,
+  slotsProps: o,
+  placeholder: i = "Pick a Time",
+  ...s
 }) => {
-  const [o, m] = l(!1);
-  return /* @__PURE__ */ s(f, { open: o, onOpenChange: m, children: [
-    /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
-      u,
+  const [t, p] = l(!1);
+  return /* @__PURE__ */ c(b, { open: t, onOpenChange: p, children: [
+    /* @__PURE__ */ r(f, { asChild: !0, children: /* @__PURE__ */ r(
+      m,
       {
-        variant: "outline",
-        className: n("w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100", i),
-        "aria-label": r?.hour ? `Selected time: ${r.hour}:${r.minute} ${r.ampm}` : p,
-        ...c,
-        children: `${r?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${r?.minute?.toString()?.padStart(2, "0") ?? "--"} ${r?.ampm ?? "--"}`
+        variant: "text",
+        className: a(
+          "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
+          d
+        ),
+        "data-placeholder": e ? void 0 : "",
+        "aria-label": e?.hour ? `Selected time: ${e.hour}:${e.minute} ${e.ampm}` : i,
+        ...s,
+        children: `${e?.hour?.toString()?.padStart(2, "0") ?? "--"} : ${e?.minute?.toString()?.padStart(2, "0") ?? "--"} ${e?.ampm ?? "--"}`
       }
     ) }),
-    /* @__PURE__ */ t(h, { ...e?.content ?? {}, className: n("w-auto p-0", e?.content?.className), children: /* @__PURE__ */ t(d, { isOpen: o, onTimeChange: a, time: r, slotsProps: e }) })
+    /* @__PURE__ */ r(g, { ...o?.content ?? {}, className: a("w-auto p-0", o?.content?.className), children: /* @__PURE__ */ r(u, { isOpen: t, onTimeChange: n, time: e, slotsProps: o }) })
   ] });
 };
 export {
-  C as DesktopTimePicker
+  $ as DesktopTimePicker
 };
 //# sourceMappingURL=desktoptimepicker.es.js.map

package/dist/desktoptimepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["import { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a Time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant={\"outline\"}\r\n          className={cn(\"w-full border-gray-300 text-text focus:ring-0 active:ring-transparent justify-start disabled:bg-gray-100\", className)}\r\n          aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n          {...restProps}\r\n        >\r\n          {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"w-auto p-0\", slotsProps?.content?.className)}>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["DesktopTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AAiBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACG,gBAAAC,EAAAC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAI,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAWC,EAAG,4GAA4GZ,CAAS;AAAA,QACnI,cAAYF,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA,GAEtI;AAAA,IACA,gBAAAW,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,cAAcX,GAAY,SAAS,SAAS,GACzG,UAAC,gBAAAQ,EAAAK,GAAA,EAAkB,QAAAV,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,GAAwB,EACrG,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a Time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-placeholder={!time ? \"\" : undefined}\r\n          aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n          {...restProps}\r\n        >\r\n          {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"w-auto p-0\", slotsProps?.content?.className)}>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["DesktopTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AAmBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACG,gBAAAC,EAAAC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAC,gBAAAI,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAZ;AAAA,QACF;AAAA,QACA,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,cAAYA,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA,GAEtI;AAAA,IACA,gBAAAW,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,cAAcX,GAAY,SAAS,SAAS,GACzG,UAAC,gBAAAQ,EAAAK,GAAA,EAAkB,QAAAV,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,GAAwB,EACrG,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/dialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.es.js","sources":["../src/components/dialog/Dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n} from \"@radix-ui/react-dialog\";\nimport { XMark } from \"@trsys-tech/matrix-icons\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <XMark className=\"h-5 w-5\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)} {...props} />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)} {...props} />\n  ),\n);\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />);\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };\nexport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n};\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","jsxs","XMark","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;AAgBA,MAAMA,IAASC,EAAgB,MAEzBC,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMW,IAAgBN,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,EAAM,GAAGC,MACpC,gBAAAK,EAACX,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAO,EAACL,GAAc,EAAA;AAAA,EACf,gBAAAS;AAAA,IAACb,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QACA,gBAAAC,EAAAb,EAAgB,OAAhB,EAAsB,WAAU,sIAC/B,UAAA;AAAA,UAAC,gBAAAS,EAAAK,GAAA,EAAM,WAAU,UAAU,CAAA;AAAA,UAC1B,gBAAAL,EAAA,QAAA,EAAK,WAAU,WAAU,UAAK,QAAA,CAAA;AAAA,QAAA,EACjC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACF,GACF,CACD;AACDE,EAAc,cAAcX,EAAgB,QAAQ;AAEpD,MAAMe,IAAe,CAAC,EAAE,WAAAT,GAAW,GAAGC,EAAM,MACzC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAG,uCAAuCJ,CAAS,GAAI,GAAGC,EAAO,CAAA;AAEnFQ,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC,EAAE,WAAAV,GAAW,GAAGC,EAAM,MACzC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAG,iEAAiEJ,CAAS,GAAI,GAAGC,EAAO,CAAA;AAE7GS,EAAa,cAAc;AAE3B,MAAMC,IAAcZ,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MACvB,gBAAAC,EAAAT,EAAgB,OAAhB,EAAsB,KAAAQ,GAAU,WAAWE,EAAG,qDAAqDJ,CAAS,GAAI,GAAGC,EAAO,CAAA;AAE/H;AACAU,EAAY,cAAcjB,EAAgB,MAAM;AAE1C,MAAAkB,IAAoBb,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAAQ,gBAAAC,EAACT,EAAgB,aAAhB,EAA4B,KAAAQ,GAAU,WAAWE,EAAG,iCAAiCJ,CAAS,GAAI,GAAGC,GAAO,CAAE;AACnJW,EAAkB,cAAclB,EAAgB,YAAY;"}
+{"version":3,"file":"dialog.es.js","sources":["../src/components/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n} from \"@radix-ui/react-dialog\";\nimport { XMark } from \"@trsys-tech/matrix-icons\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <XMark className=\"h-5 w-5\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)} {...props} />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)} {...props} />\n  ),\n);\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />);\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };\nexport type {\n  DialogContentProps,\n  DialogTriggerProps,\n  DialogProps,\n  DialogCloseProps,\n  DialogTitleProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogDescriptionProps,\n};\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","React","className","props","ref","jsx","cn","DialogContent","children","jsxs","XMark","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":";;;;;AAkBA,MAAMA,IAASC,EAAgB,MAEzBC,IAAgBD,EAAgB,SAEhCE,IAAeF,EAAgB,QAE/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAQ;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAcJ,EAAgB,QAAQ;AAEpD,MAAMW,IAAgBN,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,EAAM,GAAGC,MACpC,gBAAAK,EAACX,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAO,EAACL,GAAc,EAAA;AAAA,EACf,gBAAAS;AAAA,IAACb,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QACA,gBAAAC,EAAAb,EAAgB,OAAhB,EAAsB,WAAU,sIAC/B,UAAA;AAAA,UAAC,gBAAAS,EAAAK,GAAA,EAAM,WAAU,UAAU,CAAA;AAAA,UAC1B,gBAAAL,EAAA,QAAA,EAAK,WAAU,WAAU,UAAK,QAAA,CAAA;AAAA,QAAA,EACjC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AACF,GACF,CACD;AACDE,EAAc,cAAcX,EAAgB,QAAQ;AAEpD,MAAMe,IAAe,CAAC,EAAE,WAAAT,GAAW,GAAGC,EAAM,MACzC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAG,uCAAuCJ,CAAS,GAAI,GAAGC,EAAO,CAAA;AAEnFQ,EAAa,cAAc;AAE3B,MAAMC,IAAe,CAAC,EAAE,WAAAV,GAAW,GAAGC,EAAM,MACzC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAG,iEAAiEJ,CAAS,GAAI,GAAGC,EAAO,CAAA;AAE7GS,EAAa,cAAc;AAE3B,MAAMC,IAAcZ,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MACvB,gBAAAC,EAAAT,EAAgB,OAAhB,EAAsB,KAAAQ,GAAU,WAAWE,EAAG,qDAAqDJ,CAAS,GAAI,GAAGC,EAAO,CAAA;AAE/H;AACAU,EAAY,cAAcjB,EAAgB,MAAM;AAE1C,MAAAkB,IAAoBb,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAAQ,gBAAAC,EAACT,EAAgB,aAAhB,EAA4B,KAAAQ,GAAU,WAAWE,EAAG,iCAAiCJ,CAAS,GAAI,GAAGC,GAAO,CAAE;AACnJW,EAAkB,cAAclB,EAAgB,YAAY;"}

package/dist/form.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.es.js","sources":["../src/components/form/Form.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from \"react-hook-form\";\n\nimport { Label } from \"../label/Label\";\nimport { cn } from \"../../lib/utils\";\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-1\", className)} {...props} />\n    </FormItemContext.Provider>\n  );\n});\nFormItem.displayName = \"FormItem\";\n\nconst FormLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<\"label\">>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return <Label ref={ref} className={cn(error && \"text-danger\", \"block text-text-300\", className)} htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = \"FormLabel\";\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ className, ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      className={cn(className, error && \"border-danger hover:border-danger focus-visible:border-danger\")}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = \"FormControl\";\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField();\n\n  return <p ref={ref} id={formDescriptionId} className={cn(\"text-[0.8rem] text-muted-foreground\", className)} {...props} />;\n});\nFormDescription.displayName = \"FormDescription\";\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message) : children;\n\n  // if (!body) {\n  //   return null;\n  // }\n\n  return (\n    <p ref={ref} id={formMessageId} className={cn(\"text-[0.625rem] font-medium text-danger h-4\", className)} {...props}>\n      {body ?? \" \"}\n    </p>\n  );\n});\nFormMessage.displayName = \"FormMessage\";\n\nexport { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":"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"}
+{"version":3,"file":"form.es.js","sources":["../src/components/form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from \"react-hook-form\";\n\nimport { Label } from \"../label/Label\";\nimport { cn } from \"../../lib/utils\";\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-1\", className)} {...props} />\n    </FormItemContext.Provider>\n  );\n});\nFormItem.displayName = \"FormItem\";\n\nconst FormLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<\"label\">>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return <Label ref={ref} className={cn(error && \"text-danger\", \"block text-text-300\", className)} htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = \"FormLabel\";\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ className, ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      className={cn(className, error && \"border-danger hover:border-danger focus-visible:border-danger\")}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = \"FormControl\";\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField();\n\n  return <p ref={ref} id={formDescriptionId} className={cn(\"text-[0.8rem] text-muted-foreground\", className)} {...props} />;\n});\nFormDescription.displayName = \"FormDescription\";\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message) : children;\n\n  // if (!body) {\n  //   return null;\n  // }\n\n  return (\n    <p ref={ref} id={formMessageId} className={cn(\"text-[0.625rem] font-medium text-danger h-4\", className)} {...props}>\n      {body ?? \" \"}\n    </p>\n  );\n});\nFormMessage.displayName = \"FormMessage\";\n\nexport { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"],"mappings":"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"}

package/dist/formcheckbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formcheckbox.es.js","sources":["../src/components/form-checkbox/FormCheckbox.tsx"],"sourcesContent":["import { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\nimport { Checkbox, CheckboxProps } from \"../checkbox/Checkbox\";\r\nimport { useCallback } from \"react\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype FormCheckboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      checkboxProps?: CheckboxProps;\r\n    };\r\n  };\r\n\r\nconst FormCheckbox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormCheckboxProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n\r\n  const handleCheckChanged = useCallback(\r\n    (checked: boolean) => {\r\n      field.onChange(checked);\r\n    },\r\n    [field],\r\n  );\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps} className=\"flex items-center gap-2 justify-start space-y-0\">\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <Checkbox\r\n                {...(slotProps?.checkboxProps ?? {})}\r\n                {...field}\r\n                checked={field.value}\r\n                onCheckedChange={handleCheckChanged}\r\n                aria-required={required}\r\n                disabled={disabled}\r\n              />\r\n            </FormControl>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})} className={cn(\"text-text\", slotProps?.formLabelProps?.className)}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCheckbox, type FormCheckboxProps };\r\n"],"names":["FormCheckbox","props","name","control","defaultValue","disabled","rules","shouldUnregister","label","slotProps","required","formItemProps","field","useController","handleCheckChanged","useCallback","checked","jsx","FormField","jsxs","FormItem","FormControl","Checkbox","FormLabel","cn","FormMessage"],"mappings":";;;;;;AAuBM,MAAAA,IAAe,CAA0EC,MAAkD;AAC/I,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAkB,IAAAV,GACnH,EAAE,OAAAW,EAAM,IAAIC,EAAc,EAAE,MAAAX,GAAM,SAAAC,GAAS,OAAAG,GAAO,cAAAF,GAAc,UAAAC,GAAU,kBAAAE,GAAkB,GAE5FO,IAAqBC;AAAA,IACzB,CAACC,MAAqB;AACpB,MAAAJ,EAAM,SAASI,CAAO;AAAA,IACxB;AAAA,IACA,CAACJ,CAAK;AAAA,EACR;AAGE,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAf;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,QAEN,gBAAAO,EAAAC,GAAA,EAAU,GAAGT,GAAe,WAAU,mDACrC,UAAA;AAAA,QAAA,gBAAAM,EAACI,GAAa,EAAA,GAAIZ,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAQ;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAIb,GAAW,iBAAiB,CAAC;AAAA,YACjC,GAAGG;AAAAA,YACJ,SAASA,EAAM;AAAA,YACf,iBAAiBE;AAAA,YACjB,iBAAeJ;AAAA,YACf,UAAAL;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACC,gBAAAc,EAAAI,GAAA,EAAW,GAAId,GAAW,kBAAkB,CAAA,GAAK,WAAWe,EAAG,aAAaf,GAAW,gBAAgB,SAAS,GAC9G,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAO,EAAC,QAAK,EAAA,WAAU,iCAAgC,UAAC,IAAA,CAAA;AAAA,QAAA,GAChE;AAAA,0BACCQ,GAAa,EAAA,GAAIhB,GAAW,oBAAoB,CAAA,EAAK,CAAA;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"formcheckbox.es.js","sources":["../src/components/form-checkbox/FormCheckbox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues, useController } from \"react-hook-form\";\r\nimport { Checkbox, CheckboxProps } from \"../checkbox/Checkbox\";\r\nimport { useCallback } from \"react\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype FormCheckboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    control: Control<TFieldValues>;\r\n    required?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n      checkboxProps?: CheckboxProps;\r\n    };\r\n  };\r\n\r\nconst FormCheckbox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormCheckboxProps<TFieldValues, TName>) => {\r\n  const { name, control, defaultValue, disabled, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n  const { field } = useController({ name, control, rules, defaultValue, disabled, shouldUnregister });\r\n\r\n  const handleCheckChanged = useCallback(\r\n    (checked: boolean) => {\r\n      field.onChange(checked);\r\n    },\r\n    [field],\r\n  );\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps} className=\"flex items-center gap-2 justify-start space-y-0\">\r\n            <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n              <Checkbox\r\n                {...(slotProps?.checkboxProps ?? {})}\r\n                {...field}\r\n                checked={field.value}\r\n                onCheckedChange={handleCheckChanged}\r\n                aria-required={required}\r\n                disabled={disabled}\r\n              />\r\n            </FormControl>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})} className={cn(\"text-text\", slotProps?.formLabelProps?.className)}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCheckbox, type FormCheckboxProps };\r\n"],"names":["FormCheckbox","props","name","control","defaultValue","disabled","rules","shouldUnregister","label","slotProps","required","formItemProps","field","useController","handleCheckChanged","useCallback","checked","jsx","FormField","jsxs","FormItem","FormControl","Checkbox","FormLabel","cn","FormMessage"],"mappings":";;;;;;AAyBM,MAAAA,IAAe,CAA0EC,MAAkD;AAC/I,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAkB,IAAAV,GACnH,EAAE,OAAAW,EAAM,IAAIC,EAAc,EAAE,MAAAX,GAAM,SAAAC,GAAS,OAAAG,GAAO,cAAAF,GAAc,UAAAC,GAAU,kBAAAE,GAAkB,GAE5FO,IAAqBC;AAAA,IACzB,CAACC,MAAqB;AACpB,MAAAJ,EAAM,SAASI,CAAO;AAAA,IACxB;AAAA,IACA,CAACJ,CAAK;AAAA,EACR;AAGE,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAf;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,QAEN,gBAAAO,EAAAC,GAAA,EAAU,GAAGT,GAAe,WAAU,mDACrC,UAAA;AAAA,QAAA,gBAAAM,EAACI,GAAa,EAAA,GAAIZ,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAQ;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAIb,GAAW,iBAAiB,CAAC;AAAA,YACjC,GAAGG;AAAAA,YACJ,SAASA,EAAM;AAAA,YACf,iBAAiBE;AAAA,YACjB,iBAAeJ;AAAA,YACf,UAAAL;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACC,gBAAAc,EAAAI,GAAA,EAAW,GAAId,GAAW,kBAAkB,CAAA,GAAK,WAAWe,EAAG,aAAaf,GAAW,gBAAgB,SAAS,GAC9G,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAO,EAAC,QAAK,EAAA,WAAU,iCAAgC,UAAC,IAAA,CAAA;AAAA,QAAA,GAChE;AAAA,0BACCQ,GAAa,EAAA,GAAIhB,GAAW,oBAAoB,CAAA,EAAK,CAAA;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EACF;AAEJ;"}