@tecsinapse/cortex-react 1.3.3 → 1.4.0-beta.0

package/dist/cjs/components/Accordion.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var lia = require('react-icons/lia');
+
+const Context = React.createContext({ open: false });
+const useAccordionContext = () => {
+  const context = React.useContext(Context);
+  if (!context) {
+    throw new Error("useAccordionContext must be used within a Accordion");
+  }
+  return context;
+};
+const Trigger = ({
+  label,
+  floating = false,
+  /**
+   * Only applied to trigger arrow
+   */
+  className
+}) => {
+  const { open, toggle } = useAccordionContext();
+  if (!floating && !label) {
+    throw new Error(
+      "A label must be specified if the trigger is not floating variant"
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        "flex flex-col justify-between align-center px-mili border-r border-secondary-light cursor-pointer",
+        { "mr-deca": floating }
+      ),
+      onClick: toggle
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          "rounded-mili border border-secondary-light flex align-center justify-center p-micro",
+          {
+            "absolute -translate-x-micro translate-y-deca bg-white": floating
+          },
+          className
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        lia.LiaAngleRightSolid,
+        {
+          className: clsx(
+            "text-secondary-medium transition-transform duration-200",
+            {
+              "rotate-180": open
+            }
+          )
+        }
+      )
+    ),
+    !floating ? /* @__PURE__ */ React.createElement("span", { className: "-rotate-180 [writing-mode:vertical-lr]" }, label) : null
+  );
+};
+const Content = ({ children }) => {
+  const container = React.useRef(null);
+  const [width, setWidth] = React.useState(null);
+  const { open } = useAccordionContext();
+  React.useLayoutEffect(() => {
+    const size = Array.from(
+      container.current?.children || []
+    ).reduce((prev, curr) => prev + curr.clientWidth, 0);
+    setWidth(`${size}px`);
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        `overflow-hidden transition-[width] ease-in-out duration-200`,
+        { [`w-[${width}]`]: !!width && open },
+        { "w-0": !open }
+      ),
+      ref: container,
+      "data-testid": "accordion-container"
+    },
+    children
+  );
+};
+const Face = ({
+  children,
+  defaultOpen = false
+}) => {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const toggle = React.useCallback(() => setOpen((prev) => !prev), []);
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row" }, children));
+};
+const Root = ({ children, defaultOpen, label, floating }) => {
+  return /* @__PURE__ */ React.createElement(Face, { defaultOpen }, /* @__PURE__ */ React.createElement(Trigger, { label, floating }), /* @__PURE__ */ React.createElement(Content, null, children));
+};
+const Accordion = {
+  Face,
+  Root,
+  Trigger,
+  Content
+};
+
+exports.Accordion = Accordion;

package/dist/cjs/components/Kanban.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const Root = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx.clsx(
+        "border border-dashed border-secondary-medium rounded-mili bg-secondary-xlight overflow-hidden",
+        className
+      )
+    },
+    children
+  );
+};
+const Header = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { ...rest, className: clsx.clsx("p-deca", className) }, children);
+};
+const Body = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { ...rest, className: clsx.clsx("overflow-y-scroll", className) }, children);
+};
+const ContainerList = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("div", { ...rest, className: clsx.clsx("px-deca", className) }, children);
+};
+const Kanban = {
+  Root,
+  Header,
+  Body,
+  ContainerList
+};
+
+exports.Kanban = Kanban;

package/dist/cjs/components/Menubar/MostUsedList.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+require('../Accordion.js');
 require('clsx');
 require('@internationalized/date');
 require('../Badge.js');

package/dist/cjs/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var Accordion = require('./components/Accordion.js');
 var Avatar = require('./components/Avatar.js');
 var Badge = require('./components/Badge.js');
 var BreadcrumbItem = require('./components/Breadcrumbs/BreadcrumbItem.js');
@@ -34,6 +35,7 @@ var TimeField = require('./components/TimeField/TimeField.js');
 var TimeFieldInput = require('./components/TimeField/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
+var Kanban = require('./components/Kanban.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -54,6 +56,7 @@ var masks = require('./components/Input/masks.js');
 
 
 
+exports.Accordion = Accordion.Accordion;
 exports.Avatar = Avatar.Avatar;
 exports.Badge = Badge.Badge;
 exports.BadgeAnchor = Badge.BadgeAnchor;
@@ -96,6 +99,7 @@ exports.TimeField = TimeField.TimeField;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
+exports.Kanban = Kanban.Kanban;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/service/SnackbarSonner.js

@@ -2,6 +2,7 @@
 
 var sonner = require('sonner');
 var React = require('react');
+require('../components/Accordion.js');
 require('clsx');
 require('@internationalized/date');
 require('../components/Badge.js');

package/dist/esm/components/Accordion.js

@@ -0,0 +1,104 @@
+import clsx from 'clsx';
+import React__default, { createContext, useRef, useState, useLayoutEffect, useCallback, useContext } from 'react';
+import { LiaAngleRightSolid } from 'react-icons/lia';
+
+const Context = createContext({ open: false });
+const useAccordionContext = () => {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("useAccordionContext must be used within a Accordion");
+  }
+  return context;
+};
+const Trigger = ({
+  label,
+  floating = false,
+  /**
+   * Only applied to trigger arrow
+   */
+  className
+}) => {
+  const { open, toggle } = useAccordionContext();
+  if (!floating && !label) {
+    throw new Error(
+      "A label must be specified if the trigger is not floating variant"
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: clsx(
+        "flex flex-col justify-between align-center px-mili border-r border-secondary-light cursor-pointer",
+        { "mr-deca": floating }
+      ),
+      onClick: toggle
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: clsx(
+          "rounded-mili border border-secondary-light flex align-center justify-center p-micro",
+          {
+            "absolute -translate-x-micro translate-y-deca bg-white": floating
+          },
+          className
+        )
+      },
+      /* @__PURE__ */ React__default.createElement(
+        LiaAngleRightSolid,
+        {
+          className: clsx(
+            "text-secondary-medium transition-transform duration-200",
+            {
+              "rotate-180": open
+            }
+          )
+        }
+      )
+    ),
+    !floating ? /* @__PURE__ */ React__default.createElement("span", { className: "-rotate-180 [writing-mode:vertical-lr]" }, label) : null
+  );
+};
+const Content = ({ children }) => {
+  const container = useRef(null);
+  const [width, setWidth] = useState(null);
+  const { open } = useAccordionContext();
+  useLayoutEffect(() => {
+    const size = Array.from(
+      container.current?.children || []
+    ).reduce((prev, curr) => prev + curr.clientWidth, 0);
+    setWidth(`${size}px`);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: clsx(
+        `overflow-hidden transition-[width] ease-in-out duration-200`,
+        { [`w-[${width}]`]: !!width && open },
+        { "w-0": !open }
+      ),
+      ref: container,
+      "data-testid": "accordion-container"
+    },
+    children
+  );
+};
+const Face = ({
+  children,
+  defaultOpen = false
+}) => {
+  const [open, setOpen] = useState(defaultOpen);
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+  return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row" }, children));
+};
+const Root = ({ children, defaultOpen, label, floating }) => {
+  return /* @__PURE__ */ React__default.createElement(Face, { defaultOpen }, /* @__PURE__ */ React__default.createElement(Trigger, { label, floating }), /* @__PURE__ */ React__default.createElement(Content, null, children));
+};
+const Accordion = {
+  Face,
+  Root,
+  Trigger,
+  Content
+};
+
+export { Accordion };

package/dist/esm/components/Kanban.js

@@ -0,0 +1,33 @@
+import { clsx } from 'clsx';
+import React__default from 'react';
+
+const Root = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx(
+        "border border-dashed border-secondary-medium rounded-mili bg-secondary-xlight overflow-hidden",
+        className
+      )
+    },
+    children
+  );
+};
+const Header = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { ...rest, className: clsx("p-deca", className) }, children);
+};
+const Body = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { ...rest, className: clsx("overflow-y-scroll", className) }, children);
+};
+const ContainerList = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { ...rest, className: clsx("px-deca", className) }, children);
+};
+const Kanban = {
+  Root,
+  Header,
+  Body,
+  ContainerList
+};
+
+export { Kanban };

package/dist/esm/components/Menubar/MostUsedList.js

@@ -1,4 +1,5 @@
 import React__default, { Fragment } from 'react';
+import '../Accordion.js';
 import 'clsx';
 import '@internationalized/date';
 import '../Badge.js';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+export { Accordion } from './components/Accordion.js';
 export { Avatar } from './components/Avatar.js';
 export { Badge, BadgeAnchor } from './components/Badge.js';
 export { BreadcrumbItem } from './components/Breadcrumbs/BreadcrumbItem.js';
@@ -32,6 +33,7 @@ export { TimeField } from './components/TimeField/TimeField.js';
 export { TimeFieldInput } from './components/TimeField/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
+export { Kanban } from './components/Kanban.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

package/dist/esm/service/SnackbarSonner.js

@@ -1,5 +1,6 @@
 import { toast } from 'sonner';
 import React__default from 'react';
+import '../components/Accordion.js';
 import 'clsx';
 import '@internationalized/date';
 import '../components/Badge.js';

package/dist/types/components/Accordion.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface AccordionProps {
+    children?: React.ReactNode;
+    defaultOpen?: boolean;
+    label?: string;
+    floating?: boolean;
+}
+export declare const Accordion: {
+    Face: ({ children, defaultOpen, }: Pick<AccordionProps, 'children' | 'defaultOpen'>) => JSX.Element;
+    Root: ({ children, defaultOpen, label, floating }: AccordionProps) => JSX.Element;
+    Trigger: ({ label, floating, className, }: Pick<AccordionProps, 'floating' | 'label'> & {
+        className?: string;
+    }) => JSX.Element;
+    Content: ({ children }: Pick<AccordionProps, 'children'>) => JSX.Element;
+};
+export {};

package/dist/types/components/Kanban.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface KanbanProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface KanbanProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }
 export declare const Kanban: {
@@ -8,4 +8,3 @@ export declare const Kanban: {
     Body: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
     ContainerList: ({ children, className, ...rest }: KanbanProps) => JSX.Element;
 };
-export {};

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

@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './Avatar';
 export * from './Badge';
 export * from './Breadcrumbs';
@@ -24,3 +25,4 @@ export * from './TextArea';
 export * from './TimeField';
 export * from './Toggle';
 export * from './Tooltip';
+export * from './Kanban';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.3",
+  "version": "1.4.0-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.3.1",
+    "@tecsinapse/cortex-core": "0.3.1-beta.2",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
@@ -43,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "9d707d884c57664e25cc921ec038085a52dca55c"
+  "gitHead": "4f0144f31a476ce82c25a425fa95ef703c91a926"
 }

package/dist/types/tests/Avatar.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Badge.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/BreadcrumbItem.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Breadcrumbs.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Button.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Calendar.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/CalendarCell.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/CalendarGridBodyRows.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/CalendarGridHeaderRow.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/CalendarHeader.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Card.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/DateField.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/DatePickerInput.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/DatePickerInputBase.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/DateRangePickerInput.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/DateSegment.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/DefaultSnack.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Divider.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Drawer.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/GroupButton.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Hint.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Input/Box.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Input/Face.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Input/Left.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Input/Mask.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/tests/Input/Right.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Input/Root.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Input/Search.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Kanban.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/Categories.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/Category.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/Dropdown.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/DropdownRoot.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/Header.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/HeaderLeft.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/HeaderRigth.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/Item.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/MostUsed.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/MostUsedItem.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/MostUsedList.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/Root.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Menubar/SubItem.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Modal.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Popover.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/ProgressBar.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/RadioButton.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/RangeCalendar.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Select.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Skeleton.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Snackbar.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Table.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Tag.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/TextArea.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/TimeField.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/TimeFieldInput.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Toggle.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/Tooltip.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/tests/useCalendarCell.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/tests/useDebouncedState.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/tests/useOutsideClickListener.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/tests/utils.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';