@oneplatformdev/ui 0.1.99-beta.3 → 0.1.99-beta.300

package/DataTable/DataTableColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableColumnFilter.js","sources":["../../src/DataTable/DataTableColumnFilter.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport React, { FC, useMemo } from 'react';\n\nimport { Button } from '../Button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport { DataTableProps } from './DataTable.types';\n\n// TODO: refactor this component to use the new Table component\nexport const DataTableColumnFilter: FC<DataTableProps> = (props) => {\n  const {\n    table,\n    columnsLabel = 'Columns',\n  } = props;\n\n  const columnsCheckboxRender = useMemo(() => {\n    return table\n      .getAllColumns()\n      .filter((column) => column.getCanHide())\n      .map((column) => {\n        return (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            className=\"capitalize\"\n            checked={column.getIsVisible()}\n            onCheckedChange={(value) =>\n              column.toggleVisibility(!!value)\n            }\n          >\n            {column.id}\n          </DropdownMenuCheckboxItem>\n        );\n      })\n  }, [table])\n\n  if(!columnsCheckboxRender.length) return null;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" className=\"ml-auto\">\n          {columnsLabel}\n          <ChevronDown className=\"ml-2 h-4 w-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {columnsCheckboxRender}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"],"names":["DataTableColumnFilter","props","table","columnsLabel","columnsCheckboxRender","useMemo","column","jsx","DropdownMenuCheckboxItem","value","DropdownMenu","DropdownMenuTrigger","jsxs","Button","ChevronDown","DropdownMenuContent"],"mappings":";;;;;;AAeO,MAAMA,IAA4C,CAACC,MAAU;AAClE,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,EAAA,IACbF,GAEEG,IAAwBC,EAAQ,MAC7BH,EACJ,gBACA,OAAO,CAACI,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,SAASF,EAAO,aAAA;AAAA,MAChB,iBAAiB,CAACG,MAChBH,EAAO,iBAAiB,CAAC,CAACG,CAAK;AAAA,MAGhC,UAAAH,EAAO;AAAA,IAAA;AAAA,IAPHA,EAAO;AAAA,EAAA,CAUjB,GACF,CAACJ,CAAK,CAAC;AAEV,SAAIE,EAAsB,2BAGvBM,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAC,EAACC,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAI,EAACO,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,IAAA,EAAA,CACxC,EAAA,CACF;AAAA,IACA,gBAAAP,EAACQ,GAAA,EAAoB,OAAM,OACxB,UAAAX,EAAA,CACH;AAAA,EAAA,GACF,IAbuC;AAe3C;"}
+{"version":3,"file":"DataTableColumnFilter.js","sources":["../../src/DataTable/DataTableColumnFilter.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ChevronDown } from 'lucide-react';\r\nimport React, { FC, useMemo } from 'react';\r\n\r\nimport { Button } from '../Button';\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuContent,\r\n  DropdownMenuTrigger,\r\n} from '../DropdownMenu';\r\nimport { DataTableProps } from './DataTable.types';\r\n\r\n// TODO: refactor this component to use the new Table component\r\nexport const DataTableColumnFilter: FC<DataTableProps> = (props) => {\r\n  const {\r\n    table,\r\n    columnsLabel = 'Columns',\r\n  } = props;\r\n\r\n  const columnsCheckboxRender = useMemo(() => {\r\n    return table\r\n      .getAllColumns()\r\n      .filter((column) => column.getCanHide())\r\n      .map((column) => {\r\n        return (\r\n          <DropdownMenuCheckboxItem\r\n            key={column.id}\r\n            className=\"capitalize\"\r\n            checked={column.getIsVisible()}\r\n            onCheckedChange={(value) =>\r\n              column.toggleVisibility(!!value)\r\n            }\r\n          >\r\n            {column.id}\r\n          </DropdownMenuCheckboxItem>\r\n        );\r\n      })\r\n  }, [table])\r\n\r\n  if(!columnsCheckboxRender.length) return null;\r\n\r\n  return (\r\n    <DropdownMenu>\r\n      <DropdownMenuTrigger asChild>\r\n        <Button variant=\"outline\" className=\"ml-auto\">\r\n          {columnsLabel}\r\n          <ChevronDown className=\"ml-2 h-4 w-4\" />\r\n        </Button>\r\n      </DropdownMenuTrigger>\r\n      <DropdownMenuContent align=\"end\">\r\n        {columnsCheckboxRender}\r\n      </DropdownMenuContent>\r\n    </DropdownMenu>\r\n  );\r\n};\r\n"],"names":["DataTableColumnFilter","props","table","columnsLabel","columnsCheckboxRender","useMemo","column","jsx","DropdownMenuCheckboxItem","value","DropdownMenu","DropdownMenuTrigger","jsxs","Button","ChevronDown","DropdownMenuContent"],"mappings":";;;;;AAeO,MAAMA,IAA4C,CAACC,MAAU;AAClE,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,EAAA,IACbF,GAEEG,IAAwBC,EAAQ,MAC7BH,EACJ,gBACA,OAAO,CAACI,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,SAASF,EAAO,aAAA;AAAA,MAChB,iBAAiB,CAACG,MAChBH,EAAO,iBAAiB,CAAC,CAACG,CAAK;AAAA,MAGhC,UAAAH,EAAO;AAAA,IAAA;AAAA,IAPHA,EAAO;AAAA,EAAA,CAUjB,GACF,CAACJ,CAAK,CAAC;AAEV,SAAIE,EAAsB,2BAGvBM,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAC,EAACC,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAI,EAACO,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,IAAA,EAAA,CACxC,EAAA,CACF;AAAA,IACA,gBAAAP,EAACQ,GAAA,EAAoB,OAAM,OACxB,UAAAX,EAAA,CACH;AAAA,EAAA,GACF,IAbuC;AAe3C;"}

package/DataTable/useDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataTable.js","sources":["../../src/DataTable/useDataTable.ts"],"sourcesContent":["import React from 'react';\nimport {\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\n// TODO: refactor any type\nexport const useDataTable = (data: any, columns: any) => {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: true,\n    manualPagination: true,\n    manualSorting: true,\n    manualFiltering: true,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n    },\n  });\n\n  return { table };\n};\n"],"names":["useDataTable","data","columns","sorting","setSorting","React","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel"],"mappings":";;AAaO,MAAMA,IAAe,CAACC,GAAWC,MAAiB;AACvD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAuB,CAAA,CAAE,GACvD,CAACC,GAAeC,CAAgB,IAAIF,EAAM;AAAA,IAC9C,CAAA;AAAA,EAAC,GAEG,CAACG,GAAkBC,CAAmB,IAC1CJ,EAAM,SAA0B,CAAA,CAAE;AAuBpC,SAAO,EAAE,OArBKK,EAAc;AAAA,IAC1B,MAAAT;AAAA,IACA,SAAAC;AAAA,IACA,iBAAiBE;AAAA,IACjB,uBAAuBG;AAAA,IACvB,iBAAiBI,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,mBAAmBC,EAAA;AAAA,IACnB,qBAAqBC,EAAA;AAAA,IACrB,0BAA0BL;AAAA,IAC1B,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,OAAO;AAAA,MACL,SAAAN;AAAA,MACA,eAAAG;AAAA,MACA,kBAAAE;AAAA,IAAA;AAAA,EACF,CACD,EAEQ;AACX;"}
+{"version":3,"file":"useDataTable.js","sources":["../../src/DataTable/useDataTable.ts"],"sourcesContent":["import React from 'react';\r\nimport {\r\n  ColumnFiltersState,\r\n  SortingState,\r\n  VisibilityState,\r\n  getCoreRowModel,\r\n  getFilteredRowModel,\r\n  getPaginationRowModel,\r\n  getSortedRowModel,\r\n  useReactTable,\r\n} from '@tanstack/react-table';\r\n\r\n// TODO: refactor any type\r\nexport const useDataTable = (data: any, columns: any) => {\r\n  const [sorting, setSorting] = React.useState<SortingState>([]);\r\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\r\n    []\r\n  );\r\n  const [columnVisibility, setColumnVisibility] =\r\n    React.useState<VisibilityState>({});\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    onSortingChange: setSorting,\r\n    onColumnFiltersChange: setColumnFilters,\r\n    getCoreRowModel: getCoreRowModel(),\r\n    getPaginationRowModel: getPaginationRowModel(),\r\n    getSortedRowModel: getSortedRowModel(),\r\n    getFilteredRowModel: getFilteredRowModel(),\r\n    onColumnVisibilityChange: setColumnVisibility,\r\n    enableRowSelection: true,\r\n    manualPagination: true,\r\n    manualSorting: true,\r\n    manualFiltering: true,\r\n    state: {\r\n      sorting,\r\n      columnFilters,\r\n      columnVisibility,\r\n    },\r\n  });\r\n\r\n  return { table };\r\n};\r\n"],"names":["useDataTable","data","columns","sorting","setSorting","React","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel"],"mappings":";;AAaO,MAAMA,IAAe,CAACC,GAAWC,MAAiB;AACvD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAuB,CAAA,CAAE,GACvD,CAACC,GAAeC,CAAgB,IAAIF,EAAM;AAAA,IAC9C,CAAA;AAAA,EAAC,GAEG,CAACG,GAAkBC,CAAmB,IAC1CJ,EAAM,SAA0B,CAAA,CAAE;AAuBpC,SAAO,EAAE,OArBKK,EAAc;AAAA,IAC1B,MAAAT;AAAA,IACA,SAAAC;AAAA,IACA,iBAAiBE;AAAA,IACjB,uBAAuBG;AAAA,IACvB,iBAAiBI,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,mBAAmBC,EAAA;AAAA,IACnB,qBAAqBC,EAAA;AAAA,IACrB,0BAA0BL;AAAA,IAC1B,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,OAAO;AAAA,MACL,SAAAN;AAAA,MACA,eAAAG;AAAA,MACA,kBAAAE;AAAA,IAAA;AAAA,EACF,CACD,EAEQ;AACX;"}

package/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,UAAU,2FAyCtB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,UAAU,2FA4CtB,CAAC"}

package/DatePicker/DatePicker.js

@@ -1,54 +1,55 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import * as i from "react";
-import { format as d } from "date-fns";
-import { Calendar as s } from "lucide-react";
-import { cn as c } from "@oneplatformdev/utils";
-import { Button as f } from "../Button/Button.js";
-import "../Button/buttonVariants.js";
-import { Calendar as p } from "../Calendar/Calendar.js";
-import { Popover as u, PopoverTrigger as h, PopoverContent as y } from "../Popover/Popover.js";
-import { uk as t } from "date-fns/locale";
-const g = i.forwardRef(
-  (a, m) => {
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import { format as c } from "date-fns";
+import { Calendar as f } from "lucide-react";
+import { cn as p } from "@oneplatformdev/utils";
+import { uk as n } from "date-fns/locale";
+import { Button as u } from "../Button/Button.js";
+import { Calendar as h } from "../Calendar/Calendar.js";
+import { Popover as g, PopoverTrigger as b, PopoverContent as y } from "../Popover/Popover.js";
+const v = a.forwardRef(
+  (i, l) => {
     const {
       selectedDate: o,
-      onDateChange: l,
-      disabled: n = !1
-    } = a;
-    return /* @__PURE__ */ e(u, { children: [
-      /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ e(
-        f,
+      onDateChange: s,
+      disabled: d = !1
+    } = i, [r, m] = a.useState(!1);
+    return /* @__PURE__ */ t(g, { open: r, onOpenChange: m, children: [
+      /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ t(
+        u,
         {
-          ref: m,
-          disabled: n,
+          ref: l,
+          disabled: d,
           variant: "outline-solid",
-          className: c(
+          className: p(
             "w-full justify-start text-left font-normal border h-10",
-            !o && "text-muted-foreground"
+            !o && "text-muted-foreground",
+            "focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]",
+            r && "outline-hidden ring-0 border-[#9368FF]"
           ),
           children: [
-            o ? d(o, "LLL dd, y", { locale: t }) : /* @__PURE__ */ r("span", { children: "dd/mm/yyyy" }),
-            /* @__PURE__ */ r(s, { className: "mr-2 h-4 w-4 ml-auto" })
+            o ? c(o, "LLL dd, y", { locale: n }) : /* @__PURE__ */ e("span", { children: "dd/mm/yyyy" }),
+            /* @__PURE__ */ e(f, { className: "mr-2 h-4 w-4 ml-auto" })
           ]
         }
       ) }),
-      /* @__PURE__ */ r(y, { align: "start", className: "w-auto p-0", children: /* @__PURE__ */ r(
-        p,
+      /* @__PURE__ */ e(y, { align: "start", className: "w-auto p-0", children: /* @__PURE__ */ e(
+        h,
         {
           mode: "single",
           captionLayout: "dropdown-buttons",
           selected: o,
-          onSelect: l,
+          onSelect: s,
           fromYear: 1960,
           toYear: 2030,
-          locale: t
+          locale: n
         }
       ) })
     ] });
   }
 );
-g.displayName = "DatePicker";
+v.displayName = "DatePicker";
 export {
-  g as DatePicker
+  v as DatePicker
 };
 //# sourceMappingURL=DatePicker.js.map

package/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { format } from 'date-fns';\nimport { Calendar as CalendarIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { Button } from '../Button';\nimport { Calendar } from '../Calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { uk } from 'date-fns/locale';\nimport { DatePickerProps } from './DatePicker.types';\n\nexport const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\n  (props, ref) => {\n    const {\n      selectedDate,\n      onDateChange,\n      disabled = false\n    } = props;\n    return (\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            ref={ref}\n            disabled={disabled}\n            variant={'outline-solid'}\n            className={cn(\n              'w-full justify-start text-left font-normal border h-10',\n              !selectedDate && 'text-muted-foreground'\n            )}\n          >\n            {selectedDate ? (\n              format(selectedDate, 'LLL dd, y', { locale: uk })\n            ) : (\n              <span>dd/mm/yyyy</span>\n            )}\n            <CalendarIcon className=\"mr-2 h-4 w-4 ml-auto\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className=\"w-auto p-0\">\n          <Calendar\n            mode=\"single\"\n            captionLayout=\"dropdown-buttons\"\n            selected={selectedDate}\n            onSelect={onDateChange}\n            fromYear={1960}\n            toYear={2030}\n            locale={uk}\n          />\n        </PopoverContent>\n      </Popover>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n"],"names":["DatePicker","React","props","ref","selectedDate","onDateChange","disabled","Popover","jsx","PopoverTrigger","jsxs","Button","cn","format","uk","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;;;AAYO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,IAAA,IACTJ;AACJ,6BACGK,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,UAAAG;AAAA,UACA,SAAS;AAAA,UACT,WAAWM;AAAA,YACT;AAAA,YACA,CAACR,KAAgB;AAAA,UAAA;AAAA,UAGlB,UAAA;AAAA,YAAAA,IACCS,EAAOT,GAAc,aAAa,EAAE,QAAQU,GAAI,IAEhD,gBAAAN,EAAC,QAAA,EAAK,UAAA,aAAA,CAAU;AAAA,YAElB,gBAAAA,EAACO,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MACA,gBAAAP,EAACQ,GAAA,EAAe,OAAM,SAAQ,WAAU,cACtC,UAAA,gBAAAR;AAAA,QAACS;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,eAAc;AAAA,UACd,UAAUb;AAAA,UACV,UAAUC;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQS;AAAA,QAAA;AAAA,MAAA,EACV,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAd,EAAW,cAAc;"}
+{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as React from 'react';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Button } from '../Button';\r\nimport { Calendar } from '../Calendar';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\r\nimport { uk } from 'date-fns/locale';\r\nimport { DatePickerProps } from './DatePicker.types';\r\n\r\nexport const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\r\n  (props, ref) => {\r\n    const {\r\n      selectedDate,\r\n      onDateChange,\r\n      disabled = false\r\n    } = props;\r\n    const [open, setOpen] = React.useState(false);\r\n    return (\r\n      <Popover open={open} onOpenChange={setOpen}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            ref={ref}\r\n            disabled={disabled}\r\n            variant={'outline-solid'}\r\n            className={cn(\r\n              'w-full justify-start text-left font-normal border h-10',\r\n              !selectedDate && 'text-muted-foreground',\r\n              'focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]',\r\n              open && 'outline-hidden ring-0 border-[#9368FF]'\r\n            )}\r\n          >\r\n            {selectedDate ? (\r\n              format(selectedDate, 'LLL dd, y', { locale: uk })\r\n            ) : (\r\n              <span>dd/mm/yyyy</span>\r\n            )}\r\n            <CalendarIcon className=\"mr-2 h-4 w-4 ml-auto\" />\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent align=\"start\" className=\"w-auto p-0\">\r\n          <Calendar\r\n            mode=\"single\"\r\n            captionLayout=\"dropdown-buttons\"\r\n            selected={selectedDate}\r\n            onSelect={onDateChange}\r\n            fromYear={1960}\r\n            toYear={2030}\r\n            locale={uk}\r\n          />\r\n        </PopoverContent>\r\n      </Popover>\r\n    );\r\n  }\r\n);\r\n\r\nDatePicker.displayName = 'DatePicker';\r\n\r\n"],"names":["DatePicker","React","props","ref","selectedDate","onDateChange","disabled","open","setOpen","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","uk","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,IAAA,IACTJ,GACE,CAACK,GAAMC,CAAO,IAAIP,EAAM,SAAS,EAAK;AAC5C,WACE,gBAAAQ,EAACC,GAAA,EAAQ,MAAAH,GAAY,cAAcC,GACjC,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,UAAAG;AAAA,UACA,SAAS;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACA,CAACV,KAAgB;AAAA,YACjB;AAAA,YACAG,KAAQ;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAH,IACCW,EAAOX,GAAc,aAAa,EAAE,QAAQY,GAAI,IAEhD,gBAAAL,EAAC,QAAA,EAAK,UAAA,aAAA,CAAU;AAAA,YAElB,gBAAAA,EAACM,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MACA,gBAAAN,EAACO,GAAA,EAAe,OAAM,SAAQ,WAAU,cACtC,UAAA,gBAAAP;AAAA,QAACQ;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,eAAc;AAAA,UACd,UAAUf;AAAA,UACV,UAAUC;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQW;AAAA,QAAA;AAAA,MAAA,EACV,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAhB,EAAW,cAAc;"}

package/Dialog/Dialog.d.ts

@@ -7,10 +7,13 @@ declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPri
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
 declare function DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
+    slotProps?: {
+        overlay?: React.ComponentProps<typeof DialogPrimitive.Overlay>;
+    };
 }): import("react/jsx-runtime").JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle(props: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
 declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogPrimitive };
 //# sourceMappingURL=Dialog.d.ts.map

package/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnE;AAED,iBAAS,aAAa,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAE7E;AAED,iBAAS,YAAY,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAE3E;AAED,iBAAS,WAAW,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEzE;AAED,iBAAS,aAAa,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAW7E;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACnF,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,2CAkDA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,iBAAiB,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQrF;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,eAAe,EAChB,CAAA"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAOzD,iBAAS,MAAM,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnE;AAED,iBAAS,aAAa,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAE7E;AAED,iBAAS,YAAY,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAE3E;AAED,iBAAS,WAAW,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEzE;AAED,iBAAS,aAAa,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAW7E;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACnF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;KAChE,CAAA;CACF,2CAsEA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CA2B7E;AAED,iBAAS,iBAAiB,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAYrF;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,eAAe,EAChB,CAAA"}

package/Dialog/Dialog.js

@@ -1,28 +1,31 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import * as p from "react";
 import * as a from "@radix-ui/react-dialog";
-import { XIcon as c } from "lucide-react";
+import { XIcon as m } from "lucide-react";
 import { cn as n } from "@oneplatformdev/utils";
-function x({
+import { useDialogClosePosition as x } from "./useDialogClosePosition.js";
+import { ButtonIcon as h } from "../ButtonIcon/ButtonIcon.js";
+function z({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Root, { "data-slot": "dialog", ...t });
 }
-function v({
+function P({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Trigger, { "data-slot": "dialog-trigger", ...t });
 }
-function u({
+function v({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Portal, { "data-slot": "dialog-portal", ...t });
 }
-function D({
+function k({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Close, { "data-slot": "dialog-close", ...t });
 }
-function g({
+function b({
   className: t,
   ...o
 }) {
@@ -38,40 +41,47 @@ function g({
     }
   );
 }
-function b(t) {
+function j(t) {
   const {
     className: o,
     children: i,
-    showCloseButton: l = !0,
-    style: r,
-    ...d
-  } = t;
-  return /* @__PURE__ */ e(u, { "data-slot": "dialog-portal", children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ s(
+    showCloseButton: s = !0,
+    style: c,
+    slotProps: d,
+    ...u
+  } = t, [f, g] = p.useState(null), l = x(f, {
+    enabled: s
+  });
+  return /* @__PURE__ */ e(v, { "data-slot": "dialog-portal", children: /* @__PURE__ */ e(b, { ...d?.overlay, children: /* @__PURE__ */ r(
     a.Content,
     {
+      ref: g,
       "data-slot": "dialog-content",
+      "data-closable": JSON.stringify(s),
       className: n(
+        "group group/content",
         "fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "grid w-full max-w-[calc(100%-2rem)] gap-4 sm:max-w-2xl",
-        "bg-background rounded-lg border p-6 shadow-lg duration-200",
+        "flex flex-col w-full max-w-[calc(100%-2rem)] sm:max-w-2xl gap-3",
+        "max-h-[90%] overflow-auto overscroll-none",
+        "bg-background rounded-lg border shadow-lg duration-200 p-6",
         "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",
         "focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent",
         "outline-none focus:outline-none focus-visible:outline-none",
         o
       ),
-      ...d,
+      ...u,
       style: {
         pointerEvents: "auto",
-        ...r || {}
+        ...c || {}
       },
       children: [
         i,
-        l && /* @__PURE__ */ s(
+        s && /* @__PURE__ */ r(
           a.Close,
           {
             "data-slot": "dialog-close",
             className: n(
-              "absolute top-4 right-4 rounded-2xl opacity-70 transition-opacity hover:opacity-100",
+              "absolute top-6 right-6 rounded-2xl opacity-70 transition-opacity hover:opacity-100",
               "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
               "ring-offset-background focus:ring-transparent focus:ring-0 focus:ring-offset-0 focus:outline-hidden",
               "focus:outline-none focus:ring-0",
@@ -79,8 +89,19 @@ function b(t) {
               '[&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-5',
               "cursor-pointer size-10 flex items-center justify-center"
             ),
+            style: {
+              top: l.top,
+              right: l.right
+            },
             children: [
-              /* @__PURE__ */ e(c, { className: "size-6 text-[#06080D]" }),
+              /* @__PURE__ */ e(
+                h,
+                {
+                  variant: "ghost",
+                  color: "secondary",
+                  icon: m
+                }
+              ),
               /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
             ]
           }
@@ -89,43 +110,60 @@ function b(t) {
     }
   ) }) });
 }
-function h({ className: t, ...o }) {
+function T({ className: t, ...o }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "dialog-header",
-      className: n("flex flex-col gap-4 justify-center text-center sm:text-left", t),
+      className: n("flex flex-col gap-4 justify-center text-center sm:text-left min-h-10", t),
       ...o
     }
   );
 }
-function y({ className: t, ...o }) {
+function E({ className: t, ...o }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "dialog-footer",
       className: n(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end pt-4",
         t
       ),
       ...o
     }
   );
 }
-function N({
-  className: t,
-  ...o
-}) {
+function O(t) {
+  const {
+    className: o,
+    children: i,
+    ...s
+  } = t;
   return /* @__PURE__ */ e(
     a.Title,
     {
+      asChild: !0,
       "data-slot": "dialog-title",
-      className: n("text-lg leading-none font-bold text-[#06080D]", t),
-      ...o
+      className: n(
+        "flex items-center min-h-10",
+        "group-data-[closable='true']/content:pr-13",
+        o
+      ),
+      ...s,
+      children: /* @__PURE__ */ e(
+        "span",
+        {
+          className: n(
+            "text-lg leading-[1.2] font-bold text-[#06080D]",
+            "whitespace-pre-wrap wrap-break-word line-clamp-10"
+          ),
+          children: i
+        }
+      )
     }
   );
 }
-function z({
+function S({
   className: t,
   ...o
 }) {
@@ -133,22 +171,26 @@ function z({
     a.Description,
     {
       "data-slot": "dialog-description",
-      className: n("text-[#363B4E] font-medium text-base", t),
+      className: n(
+        "text-[#06080D] font-medium text-base",
+        "whitespace-pre-wrap wrap-break-word line-clamp-10",
+        t
+      ),
       ...o
     }
   );
 }
 export {
-  x as Dialog,
-  D as DialogClose,
-  b as DialogContent,
-  z as DialogDescription,
-  y as DialogFooter,
-  h as DialogHeader,
-  g as DialogOverlay,
-  u as DialogPortal,
+  z as Dialog,
+  k as DialogClose,
+  j as DialogContent,
+  S as DialogDescription,
+  E as DialogFooter,
+  T as DialogHeader,
+  b as DialogOverlay,
+  v as DialogPortal,
   a as DialogPrimitive,
-  N as DialogTitle,
-  v as DialogTrigger
+  O as DialogTitle,
+  P as DialogTrigger
 };
 //# sourceMappingURL=Dialog.js.map

package/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Dialog({\n                  ...props\n                }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n                         ...props\n                       }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n                        ...props\n                      }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n                       ...props\n                     }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n                         className,\n                         ...props\n                       }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  const {\n    className,\n    children,\n    showCloseButton = true,\n    style,\n    ...rest\n  } = props;\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay>\n        <DialogPrimitive.Content\n          data-slot=\"dialog-content\"\n          className={cn(\n            'fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n            'grid w-full max-w-[calc(100%-2rem)] gap-4 sm:max-w-2xl',\n            'bg-background rounded-lg border p-6 shadow-lg duration-200',\n            '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',\n            \"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent\",\n            'outline-none focus:outline-none focus-visible:outline-none',\n            className\n          )}\n          {...rest}\n          style={{\n            pointerEvents: 'auto',\n            ...(style || {}),\n          }}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              data-slot=\"dialog-close\"\n              className={cn(\n                'absolute top-4 right-4 rounded-2xl opacity-70 transition-opacity hover:opacity-100',\n                'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',\n                'ring-offset-background focus:ring-transparent focus:ring-0 focus:ring-offset-0 focus:outline-hidden',\n                'focus:outline-none focus:ring-0',\n                'disabled:pointer-events-none [&_svg]:pointer-events-none',\n                '[&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-5',\n                'cursor-pointer size-10 flex items-center justify-center',\n              )}\n            >\n              <XIcon className='size-6 text-[#06080D]'/>\n              <span className=\"sr-only\">Close</span>\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Content>\n      </DialogOverlay>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-4 justify-center text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n                       className,\n                       ...props\n                     }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-bold text-[#06080D]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n                             className,\n                             ...props\n                           }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-[#363B4E] font-medium text-base\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n  DialogPrimitive\n}\n"],"names":["Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","jsx","cn","DialogContent","children","showCloseButton","style","rest","jsxs","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\r\nimport { XIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\nimport { useDialogClosePosition } from \"./useDialogClosePosition\";\r\n\r\nfunction Dialog({\r\n                  ...props\r\n                }: React.ComponentProps<typeof DialogPrimitive.Root>) {\r\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\r\n}\r\n\r\nfunction DialogTrigger({\r\n                         ...props\r\n                       }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\r\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\r\n}\r\n\r\nfunction DialogPortal({\r\n                        ...props\r\n                      }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\r\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\r\n}\r\n\r\nfunction DialogClose({\r\n                       ...props\r\n                     }: React.ComponentProps<typeof DialogPrimitive.Close>) {\r\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\r\n}\r\n\r\nfunction DialogOverlay({\r\n                         className,\r\n                         ...props\r\n                       }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\r\n  return (\r\n    <DialogPrimitive.Overlay\r\n      data-slot=\"dialog-overlay\"\r\n      className={cn(\r\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DialogContent(props: React.ComponentProps<typeof DialogPrimitive.Content> & {\r\n  showCloseButton?: boolean;\r\n  slotProps?: {\r\n    overlay?: React.ComponentProps<typeof DialogPrimitive.Overlay>;\r\n  }\r\n}) {\r\n  const {\r\n    className,\r\n    children,\r\n    showCloseButton = true,\r\n    style,\r\n    slotProps,\r\n    ...rest\r\n  } = props;\r\n  const [contentEl, setContentEl] = React.useState<HTMLDivElement | null>(null);\r\n\r\n  const closePosition = useDialogClosePosition(contentEl, {\r\n    enabled: showCloseButton,\r\n  });\r\n\r\n\r\n  return (\r\n    <DialogPortal data-slot=\"dialog-portal\">\r\n      <DialogOverlay {...slotProps?.overlay}>\r\n        <DialogPrimitive.Content\r\n          ref={setContentEl}\r\n          data-slot=\"dialog-content\"\r\n          data-closable={JSON.stringify(showCloseButton)}\r\n          className={cn(\r\n            'group group/content',\r\n            'fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\r\n            'flex flex-col w-full max-w-[calc(100%-2rem)] sm:max-w-2xl gap-3',\r\n            'max-h-[90%] overflow-auto overscroll-none',\r\n            'bg-background rounded-lg border shadow-lg duration-200 p-6',\r\n            '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',\r\n            \"focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent\",\r\n            'outline-none focus:outline-none focus-visible:outline-none',\r\n            className\r\n          )}\r\n          {...rest}\r\n          style={{\r\n            pointerEvents: 'auto',\r\n            ...(style || {}),\r\n          }}\r\n        >\r\n          {children}\r\n          {showCloseButton && (\r\n            <DialogPrimitive.Close\r\n              data-slot=\"dialog-close\"\r\n              className={cn(\r\n                'absolute top-6 right-6 rounded-2xl opacity-70 transition-opacity hover:opacity-100',\r\n                'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',\r\n                'ring-offset-background focus:ring-transparent focus:ring-0 focus:ring-offset-0 focus:outline-hidden',\r\n                'focus:outline-none focus:ring-0',\r\n                'disabled:pointer-events-none [&_svg]:pointer-events-none',\r\n                '[&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-5',\r\n                'cursor-pointer size-10 flex items-center justify-center',\r\n              )}\r\n              style={{\r\n                top: closePosition.top,\r\n                right: closePosition.right,\r\n              }}\r\n            >\r\n              <ButtonIcon\r\n                variant='ghost'\r\n                color='secondary'\r\n                icon={XIcon}\r\n              />\r\n              <span className=\"sr-only\">Close</span>\r\n            </DialogPrimitive.Close>\r\n          )}\r\n        </DialogPrimitive.Content>\r\n      </DialogOverlay>\r\n    </DialogPortal>\r\n  )\r\n}\r\n\r\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"dialog-header\"\r\n      className={cn(\"flex flex-col gap-4 justify-center text-center sm:text-left min-h-10\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"dialog-footer\"\r\n      className={cn(\r\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end pt-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DialogTitle(props: React.ComponentProps<typeof DialogPrimitive.Title>) {\r\n  const {\r\n    className,\r\n    children,\r\n    ...rest\r\n  } = props;\r\n  return (\r\n    <DialogPrimitive.Title\r\n      asChild\r\n      data-slot=\"dialog-title\"\r\n      className={cn(\r\n        \"flex items-center min-h-10\",\r\n        \"group-data-[closable='true']/content:pr-13\",\r\n        className\r\n      )}\r\n      {...rest}\r\n    >\r\n      <span\r\n        className={cn(\r\n          \"text-lg leading-[1.2] font-bold text-[#06080D]\",\r\n          'whitespace-pre-wrap wrap-break-word line-clamp-10',\r\n        )}\r\n      >\r\n        {children}\r\n      </span>\r\n    </DialogPrimitive.Title>\r\n  )\r\n}\r\n\r\nfunction DialogDescription({\r\n                             className,\r\n                             ...props\r\n                           }: React.ComponentProps<typeof DialogPrimitive.Description>) {\r\n  return (\r\n    <DialogPrimitive.Description\r\n      data-slot=\"dialog-description\"\r\n      className={cn(\r\n        \"text-[#06080D] font-medium text-base\",\r\n        'whitespace-pre-wrap wrap-break-word line-clamp-10',\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Dialog,\r\n  DialogClose,\r\n  DialogContent,\r\n  DialogDescription,\r\n  DialogFooter,\r\n  DialogHeader,\r\n  DialogOverlay,\r\n  DialogPortal,\r\n  DialogTitle,\r\n  DialogTrigger,\r\n  DialogPrimitive\r\n}\r\n"],"names":["Dialog","props","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","className","jsx","cn","DialogContent","children","showCloseButton","style","slotProps","rest","contentEl","setContentEl","React","closePosition","useDialogClosePosition","jsxs","ButtonIcon","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogDescription"],"mappings":"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"}

package/Dialog/Dialog.stories.js

@@ -0,0 +1,108 @@
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import { Dialog as b, DialogTrigger as O, DialogContent as B, DialogHeader as v, DialogTitle as w, DialogDescription as N, DialogFooter as T, DialogClose as F } from "./Dialog.js";
+import { useState as L, useCallback as S } from "react";
+import { Button as l } from "../Button/Button.js";
+function I(p) {
+  const {
+    open: i,
+    onOpenChange: r,
+    title: h,
+    description: a,
+    showCloseButton: u = !0,
+    withFooter: m = !0,
+    initialOpen: f = !1,
+    triggerLabel: C = "Open dialog",
+    bodyText: s = "Some content inside dialog…",
+    longBody: c = !1
+  } = p, [D, x] = L(f), t = i !== void 0, y = t ? i : D, d = S((n) => {
+    t || x(n), r?.(n);
+  }, [t, r]);
+  return /* @__PURE__ */ o("div", { className: "p-10", children: /* @__PURE__ */ e(b, { open: y, onOpenChange: d, children: [
+    /* @__PURE__ */ o(O, { asChild: !0, children: /* @__PURE__ */ o(l, { variant: "outlined", children: C }) }),
+    /* @__PURE__ */ e(
+      B,
+      {
+        showCloseButton: u,
+        className: "p-12",
+        children: [
+          /* @__PURE__ */ e(v, { children: [
+            /* @__PURE__ */ e(w, { children: [
+              h,
+              " 123"
+            ] }),
+            a ? /* @__PURE__ */ o(N, { children: a }) : null
+          ] }),
+          /* @__PURE__ */ o("div", { className: c ? "max-h-[50vh] overflow-auto pr-1" : void 0, children: c ? /* @__PURE__ */ o("div", { className: "space-y-3 text-sm leading-6", children: Array.from({ length: 30 }).map((n, g) => /* @__PURE__ */ e("p", { children: [
+            "#",
+            g + 1,
+            ". ",
+            s,
+            " Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          ] }, g)) }) : /* @__PURE__ */ o("p", { className: "text-sm leading-6", children: s }) }),
+          m ? /* @__PURE__ */ e(T, { children: [
+            /* @__PURE__ */ o(F, { asChild: !0, children: /* @__PURE__ */ o(l, { color: "secondary", children: "Cancel" }) }),
+            /* @__PURE__ */ o(l, { onClick: () => d(!1), children: "Save" })
+          ] }) : null
+        ]
+      }
+    )
+  ] }) });
+}
+const U = {
+  title: "UI/Dialog",
+  component: I,
+  parameters: {
+    layout: "fullscreen"
+  },
+  argTypes: {
+    title: { control: "text" },
+    description: { control: "text" },
+    showCloseButton: { control: "boolean" },
+    withFooter: { control: "boolean" },
+    initialOpen: { control: "boolean" },
+    triggerLabel: { control: "text" },
+    bodyText: { control: "text" },
+    longBody: { control: "boolean" }
+  },
+  args: {
+    title: "Dialog title",
+    description: "Dialog description",
+    showCloseButton: !0,
+    withFooter: !0,
+    initialOpen: !1,
+    triggerLabel: "Open dialog",
+    bodyText: "Some content inside dialog…",
+    longBody: !1
+  }
+}, W = {}, _ = {
+  args: {
+    description: ""
+  }
+}, q = {
+  args: {
+    showCloseButton: !1
+  }
+}, z = {
+  args: {
+    withFooter: !1
+  }
+}, E = {
+  args: {
+    longBody: !0,
+    bodyText: "Long text line"
+  }
+}, G = {
+  args: {
+    initialOpen: !0
+  }
+};
+export {
+  W as Default,
+  G as InitiallyOpen,
+  E as LongContentScrollable,
+  q as NoCloseButton,
+  z as NoFooter,
+  _ as WithoutDescription,
+  U as default
+};
+//# sourceMappingURL=Dialog.stories.js.map

package/Dialog/Dialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.stories.js","sources":["../../src/Dialog/Dialog.stories.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport type { Meta, StoryObj } from \"@storybook/react\";\r\n\r\nimport {\r\n  Dialog,\r\n  DialogTrigger,\r\n  DialogContent,\r\n  DialogHeader,\r\n  DialogTitle,\r\n  DialogDescription,\r\n  DialogFooter,\r\n  DialogClose,\r\n} from \"./Dialog\";\r\nimport { Button } from \"../Button\";\r\nimport { useCallback, useState } from \"react\";\r\nimport { DialogControlsProps } from \"./Dialog.types\";\r\n\r\ntype DialogDemoProps = DialogControlsProps & {\r\n  title: string;\r\n  description?: string;\r\n  showCloseButton?: boolean;\r\n  withFooter?: boolean;\r\n  initialOpen?: boolean;\r\n  triggerLabel?: string;\r\n  bodyText?: string;\r\n  longBody?: boolean;\r\n};\r\n\r\n// TODO: create cmp like alert\r\nfunction DialogDemo(props: DialogDemoProps) {\r\n  const {\r\n    open: controlledOpen,\r\n    onOpenChange,\r\n    title,\r\n    description,\r\n    showCloseButton = true,\r\n    withFooter = true,\r\n    initialOpen = false,\r\n    triggerLabel = \"Open dialog\",\r\n    bodyText = \"Some content inside dialog…\",\r\n    longBody = false,\r\n  } = props;\r\n\r\n  const [ internalOpen, setInternalOpen ] = useState(initialOpen);\r\n  const isControlled = controlledOpen !== undefined;\r\n  const open = isControlled ? controlledOpen : internalOpen;\r\n  const setOpen = useCallback((next: boolean) => {\r\n    if (!isControlled) setInternalOpen(next);\r\n    onOpenChange?.(next);\r\n  }, [ isControlled, onOpenChange ]);\r\n\r\n  return (\r\n    <div className=\"p-10\">\r\n      <Dialog open={open} onOpenChange={setOpen}>\r\n        <DialogTrigger asChild>\r\n          <Button variant='outlined'>\r\n            {triggerLabel}\r\n          </Button>\r\n        </DialogTrigger>\r\n\r\n        <DialogContent\r\n          showCloseButton={showCloseButton}\r\n          className='p-12'\r\n        >\r\n          <DialogHeader>\r\n            <DialogTitle>{title} 123</DialogTitle>\r\n            {description ? <DialogDescription>{description}</DialogDescription> : null}\r\n          </DialogHeader>\r\n\r\n          <div className={longBody ? \"max-h-[50vh] overflow-auto pr-1\" : undefined}>\r\n            {longBody ? (\r\n              <div className=\"space-y-3 text-sm leading-6\">\r\n                {Array.from({ length: 30 }).map((_, i) => (\r\n                  <p key={i}>\r\n                    #{i + 1}. {bodyText} Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n                  </p>\r\n                ))}\r\n              </div>\r\n            ) : (\r\n              <p className=\"text-sm leading-6\">{bodyText}</p>\r\n            )}\r\n          </div>\r\n\r\n          {withFooter ? (\r\n            <DialogFooter>\r\n              <DialogClose asChild>\r\n                <Button color='secondary'>\r\n                  Cancel\r\n                </Button>\r\n              </DialogClose>\r\n\r\n              <Button onClick={() => setOpen(false)}>\r\n                Save\r\n              </Button>\r\n            </DialogFooter>\r\n          ) : null}\r\n        </DialogContent>\r\n      </Dialog>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst meta: Meta<typeof DialogDemo> = {\r\n  title: \"UI/Dialog\",\r\n  component: DialogDemo,\r\n  parameters: {\r\n    layout: \"fullscreen\",\r\n  },\r\n  argTypes: {\r\n    title: { control: \"text\" },\r\n    description: { control: \"text\" },\r\n    showCloseButton: { control: \"boolean\" },\r\n    withFooter: { control: \"boolean\" },\r\n    initialOpen: { control: \"boolean\" },\r\n    triggerLabel: { control: \"text\" },\r\n    bodyText: { control: \"text\" },\r\n    longBody: { control: \"boolean\" },\r\n  },\r\n  args: {\r\n    title: \"Dialog title\",\r\n    description: \"Dialog description\",\r\n    showCloseButton: true,\r\n    withFooter: true,\r\n    initialOpen: false,\r\n    triggerLabel: \"Open dialog\",\r\n    bodyText: \"Some content inside dialog…\",\r\n    longBody: false,\r\n  },\r\n};\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof DialogDemo>;\r\n\r\nexport const Default: Story = {};\r\n\r\nexport const WithoutDescription: Story = {\r\n  args: {\r\n    description: \"\",\r\n  },\r\n};\r\n\r\nexport const NoCloseButton: Story = {\r\n  args: {\r\n    showCloseButton: false,\r\n  },\r\n};\r\n\r\nexport const NoFooter: Story = {\r\n  args: {\r\n    withFooter: false,\r\n  },\r\n};\r\n\r\nexport const LongContentScrollable: Story = {\r\n  args: {\r\n    longBody: true,\r\n    bodyText: \"Long text line\",\r\n  },\r\n};\r\n\r\nexport const InitiallyOpen: Story = {\r\n  args: {\r\n    initialOpen: true,\r\n  },\r\n};\r\n"],"names":["DialogDemo","props","controlledOpen","onOpenChange","title","description","showCloseButton","withFooter","initialOpen","triggerLabel","bodyText","longBody","internalOpen","setInternalOpen","useState","isControlled","open","setOpen","useCallback","next","jsx","Dialog","DialogTrigger","Button","jsxs","DialogContent","DialogHeader","DialogTitle","DialogDescription","_","i","DialogFooter","DialogClose","meta","Default","WithoutDescription","NoCloseButton","NoFooter","LongContentScrollable","InitiallyOpen"],"mappings":"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"}

package/Dialog/Dialog.types.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from 'react';
+import { Dialog } from './Dialog';
+export type DialogControlsProps = Pick<ComponentProps<typeof Dialog>, 'open' | 'onOpenChange'>;
+//# sourceMappingURL=Dialog.types.d.ts.map

package/Dialog/Dialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAA"}

package/Dialog/Dialog.types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Dialog.types.js.map

package/Dialog/Dialog.types.js.map

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

package/Dialog/DialogOverlayScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogOverlayScope.js","sources":["../../src/Dialog/DialogOverlayScope.tsx"],"sourcesContent":["import { createContext, PropsWithChildren, useContext } from 'react';\n\nexport const DialogOverlayContainerContext = createContext<HTMLElement | null>(\n  null\n);\nexport const useDialogOverlayContainer = () => useContext(DialogOverlayContainerContext);\n\ninterface IDialogOverlayScopeProps\n  extends PropsWithChildren {\n  value: HTMLElement | null;\n}\n\nexport const DialogOverlayScope = ({ value, children }: IDialogOverlayScopeProps) => {\n  return (\n    <DialogOverlayContainerContext.Provider value={value}>\n      {children}\n    </DialogOverlayContainerContext.Provider>\n  );\n}\n"],"names":["DialogOverlayContainerContext","createContext","useDialogOverlayContainer","useContext","DialogOverlayScope","value","children","jsx"],"mappings":";;AAEO,MAAMA,IAAgCC;AAAA,EAC3C;AACF,GACaC,IAA4B,MAAMC,EAAWH,CAA6B,GAO1EI,IAAqB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAExC,gBAAAC,EAACP,EAA8B,UAA9B,EAAuC,OAAAK,GACrC,UAAAC,EAAA,CACH;"}
+{"version":3,"file":"DialogOverlayScope.js","sources":["../../src/Dialog/DialogOverlayScope.tsx"],"sourcesContent":["import { createContext, PropsWithChildren, useContext } from 'react';\r\n\r\nexport const DialogOverlayContainerContext = createContext<HTMLElement | null>(\r\n  null\r\n);\r\nexport const useDialogOverlayContainer = () => useContext(DialogOverlayContainerContext);\r\n\r\ninterface IDialogOverlayScopeProps\r\n  extends PropsWithChildren {\r\n  value: HTMLElement | null;\r\n}\r\n\r\nexport const DialogOverlayScope = ({ value, children }: IDialogOverlayScopeProps) => {\r\n  return (\r\n    <DialogOverlayContainerContext.Provider value={value}>\r\n      {children}\r\n    </DialogOverlayContainerContext.Provider>\r\n  );\r\n}\r\n"],"names":["DialogOverlayContainerContext","createContext","useDialogOverlayContainer","useContext","DialogOverlayScope","value","children","jsx"],"mappings":";;AAEO,MAAMA,IAAgCC;AAAA,EAC3C;AACF,GACaC,IAA4B,MAAMC,EAAWH,CAA6B,GAO1EI,IAAqB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAExC,gBAAAC,EAACP,EAA8B,UAA9B,EAAuC,OAAAK,GACrC,UAAAC,EAAA,CACH;"}

package/Dialog/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Dialog';
 export * from './DialogOverlayScope';
+export type * from './Dialog.types';
 //# sourceMappingURL=index.d.ts.map

package/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAA;AACpC,mBAAmB,gBAAgB,CAAA"}

package/Dialog/useDialogClosePosition.d.ts

@@ -0,0 +1,11 @@
+type UseDialogClosePositionOptions = {
+    enabled?: boolean;
+    titleSelector?: string;
+};
+type DialogClosePosition = {
+    top?: number;
+    right?: number;
+};
+export declare function useDialogClosePosition(contentEl: HTMLElement | null, options?: UseDialogClosePositionOptions): DialogClosePosition;
+export {};
+//# sourceMappingURL=useDialogClosePosition.d.ts.map

package/Dialog/useDialogClosePosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogClosePosition.d.ts","sourceRoot":"","sources":["../../src/Dialog/useDialogClosePosition.ts"],"names":[],"mappings":"AAEA,KAAK,6BAA6B,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,OAAO,CAAC,EAAE,6BAA6B,uBAkFxC"}