@fpkit/acss 6.2.0 → 6.3.0

package/src/types/popover.d.ts

@@ -0,0 +1,64 @@
+/**
+ * TypeScript definitions for native HTML Popover API
+ * These types extend the standard DOM interfaces to include popover-related properties
+ */
+
+declare global {
+  interface HTMLElement {
+    /**
+     * Shows the popover element
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover
+     */
+    showPopover(): void;
+
+    /**
+     * Hides the popover element
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidePopover
+     */
+    hidePopover(): void;
+
+    /**
+     * Toggles the popover element between shown and hidden
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover
+     */
+    togglePopover(force?: boolean): void;
+  }
+
+  interface ToggleEvent extends Event {
+    /**
+     * The new state of the element ('open' | 'closed')
+     */
+    newState: 'open' | 'closed';
+
+    /**
+     * The old state of the element ('open' | 'closed')
+     */
+    oldState: 'open' | 'closed';
+  }
+
+  interface HTMLElementEventMap {
+    toggle: ToggleEvent;
+  }
+
+  namespace React {
+    interface HTMLAttributes<T> {
+      /**
+       * The popover attribute indicates that an element should be hidden until opened
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover
+       */
+      popover?: 'auto' | 'manual' | '';
+
+      /**
+       * The ID of the popover element to invoke
+       */
+      popovertarget?: string;
+
+      /**
+       * The action to perform on the popover element
+       */
+      popovertargetaction?: 'hide' | 'show' | 'toggle';
+    }
+  }
+}
+
+export {};

package/libs/chunk-4I5MF54P.js

@@ -1,8 +0,0 @@
-import { b } from './chunk-GCGKYLDG.js';
-import e from 'react';
-
-var P={display:"block",position:"absolute",background:"#000",border:"1px solid #010101",padding:"10px",color:"#fff",transition:"opacity .5s ease-in-out"},o=({children:n,popoverTrigger:l,styles:a,...d})=>{let t=e.useRef(null),r=e.useRef(null),{isVisible:p,popoverPosition:s,handlePointerEvent:v,handlePointerLeave:c}=b(t,r),f={opacity:p?1:0,top:s.top,left:s.left,zIndex:999};return e.createElement(e.Fragment,null,e.createElement("div",{ref:t,onPointerEnter:v,onPointerLeave:c,...d},l),p&&e.createElement("div",{ref:r,style:{...f,...a}},n))},S=o;o.displayName="Popover";o.styles=P;
-
-export { P as a, o as b, S as c };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-4I5MF54P.js.map

package/libs/chunk-4I5MF54P.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/popover/popover.tsx"],"names":["React","defaultStyles","Popover","children","popoverTrigger","styles","props","hoverRef","popOverRef","isVisible","popoverPosition","handlePointerEvent","handlePointerLeave","use_popover_default","popoverStyles","popover_default"],"mappings":"wCAAA,OAAOA,MAAW,QAeX,IAAMC,EAAgB,CAC3B,QAAS,QACT,SAAU,WACV,WAAY,OACZ,OAAQ,oBACR,QAAS,OACT,MAAO,OACP,WAAY,yBACd,EAsBaC,EAAU,CAAC,CACtB,SAAAC,EACA,eAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAiC,CAC/B,IAAMC,EAAWP,EAAM,OAAO,IAAI,EAC5BQ,EAAaR,EAAM,OAAO,IAAI,EAC9B,CAAE,UAAAS,EAAW,gBAAAC,EAAiB,mBAAAC,EAAoB,mBAAAC,CAAmB,EACzEC,EAAWN,EAAUC,CAAU,EAC3BM,EAAgB,CACpB,QAASL,EAAY,EAAI,EACzB,IAAKC,EAAgB,IACrB,KAAMA,EAAgB,KAEtB,OAAQ,GACV,EAEA,OACEV,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,OACC,IAAKO,EACL,eAAgBI,EAChB,eAAgBC,EACf,GAAGN,GAEHF,CACH,EACCK,GACCT,EAAA,cAAC,OAAI,IAAKQ,EAAY,MAAO,CAAE,GAAGM,EAAe,GAAGT,CAAO,GACxDF,CACH,CAEJ,CAEJ,EAEOY,EAAQb,EACfA,EAAQ,YAAc,UACtBA,EAAQ,OAASD","sourcesContent":["import React from 'react'\nimport usePopover from '#hooks/popover/use-popover'\n\n/**\n * Interface for props accepted by the Popover component\n *\n * @property {ReactNode} children - The content to show in the popover\n * @property {ReactNode} [content] - Optional alternative content for popover\n */\nexport type PopoverProps = {\n  children: React.ReactNode\n  popoverTrigger: React.ReactNode\n  styles?: React.CSSProperties\n}\n\nexport const defaultStyles = {\n  display: 'block',\n  position: 'absolute',\n  background: '#000',\n  border: '1px solid #010101',\n  padding: '10px',\n  color: '#fff',\n  transition: 'opacity .5s ease-in-out',\n} as React.CSSProperties\n\n/**\n * Popover component to display popover content.\n *\n * @param props - The props for the component\n * @param props.children - The content to show in the popover\n * @param props.popoverTrigger - The element that triggers the popover on hover\n *\n * @returns JSX.Element - The rendered JSX element for the Popover\n * @example - <Popover popoverTrigger={<button>Hover here</button>}>Popover content</Popover>\n *\n * The component uses the usePopover hook to handle popover visibility and positioning.\n *\n * It renders the triggerElement, and conditionally renders the popover content\n * positioned absolutely when visible.\n *\n * Inline styles handle visuals like background, border, padding, etc.\n *\n * Transforms and opacity animate the enter/exit transition of the popover.\n */\n\nexport const Popover = ({\n  children,\n  popoverTrigger,\n  styles,\n  ...props\n}: PopoverProps): JSX.Element => {\n  const hoverRef = React.useRef(null)\n  const popOverRef = React.useRef(null)\n  const { isVisible, popoverPosition, handlePointerEvent, handlePointerLeave } =\n    usePopover(hoverRef, popOverRef)\n  const popoverStyles = {\n    opacity: isVisible ? 1 : 0,\n    top: popoverPosition.top,\n    left: popoverPosition.left,\n    // transform: `translateY(${isVisible ? '0px' : '-50px'})`,\n    zIndex: 999,\n  } as React.CSSProperties\n\n  return (\n    <>\n      <div\n        ref={hoverRef}\n        onPointerEnter={handlePointerEvent}\n        onPointerLeave={handlePointerLeave}\n        {...props}\n      >\n        {popoverTrigger}\n      </div>\n      {isVisible && (\n        <div ref={popOverRef} style={{ ...popoverStyles, ...styles }}>\n          {children}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default Popover\nPopover.displayName = 'Popover'\nPopover.styles = defaultStyles\n"]}

package/libs/chunk-GCGKYLDG.js

@@ -1,7 +0,0 @@
-import { useState } from 'react';
-
-var E=(o,p,n=1)=>{let[a,r]=useState(!1),[u,f]=useState({top:0,left:0});return {isVisible:a,popoverPosition:u,handlePointerEvent:v=>{v?.stopPropagation();let t=o.current?.offsetHeight||40;if(o.current){let s=o.current.getBoundingClientRect(),{scrollY:e,scrollX:h,innerHeight:i}=window,c=s.bottom+e+n,m=s.left+h,P=c+t,H=p.current?.offsetHeight??t,d=P>e+i?Math.max(e+i-H-t-n,e)-t-n:c;f({top:d,left:m}),r(!0);}},handlePointerLeave:()=>{r(!1);}}},b=E;
-
-export { E as a, b };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-GCGKYLDG.js.map

package/libs/chunk-GCGKYLDG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/popover/use-popover.tsx"],"names":["useState","usePopover","elementRef","hoverRef","spacing","isVisible","setIsVisible","popoverPosition","setPopoverPosition","event","height","rect","scrollY","scrollX","innerHeight","popoverTop","popoverLeft","popoverBottom","popoverHeight","adjustedTop","use_popover_default"],"mappings":"AAAA,OAAS,YAAAA,MAAgB,QA2BlB,IAAMC,EAAa,CACxBC,EACAC,EACAC,EAAU,IACP,CACH,GAAM,CAACC,EAAWC,CAAY,EAAIN,EAAS,EAAK,EAC1C,CAACO,EAAiBC,CAAkB,EAAIR,EAAmB,CAC/D,IAAK,EACL,KAAM,CACR,CAAC,EAsCD,MAAO,CACL,UAAAK,EACA,gBAAAE,EACA,mBAtCAE,GACG,CACHA,GAAO,gBAAgB,EACvB,IAAMC,EAASR,EAAW,SAAS,cAAgB,GACnD,GAAIA,EAAW,QAAS,CACtB,IAAMS,EAAOT,EAAW,QAAQ,sBAAsB,EAChD,CAAE,QAAAU,EAAS,QAAAC,EAAS,YAAAC,CAAY,EAAI,OAEpCC,EAAaJ,EAAK,OAASC,EAAUR,EACrCY,EAAcL,EAAK,KAAOE,EAC1BI,EAAgBF,EAAaL,EAC7BQ,EAAgBf,EAAS,SAAS,cAAgBO,EAElDS,EACJF,EAAgBL,EAAUE,EACtB,KAAK,IACHF,EAAUE,EAAcI,EAAgBR,EAASN,EACjDQ,CACF,EACAF,EACAN,EACAW,EAENP,EAAmB,CACjB,IAAKW,EACL,KAAMH,CACR,CAAC,EACDV,EAAa,EAAI,CACnB,CACF,EAUE,mBARyB,IAAM,CAC/BA,EAAa,EAAK,CACpB,CAOA,CACF,EAEOc,EAAQnB","sourcesContent":["import { useState } from 'react'\n\ntype Position = {\n  /**\n   * @description This is the top position of the popover.\n   * @default 0\n   */\n  top: number\n  /**\n   * @description This is the left position of the popover.\n   * @default 0\n   */\n  left: number\n}\n\n/**\n * @description This is the hook to show/hide the popover.\n * @param elementRef - This is the ref of the element on which the popover should be shown.\n * @param hoverRef - This is the ref of the element on which the popover should be shown.\n * @param spacing - This is the spacing between the element and the popover.\n * @example - const { isVisible, popoverPosition, handlePointerEvent, handlePointerLeave } = usePopover(hoverRef, popOverRef, 1)\n * @returns - This is the object of the following properties.\n * @returns - isVisible - This is the boolean value to show/hide the popover.\n * @returns - popoverPosition - This is the position of the popover.\n * @returns - handlePointerEvent - This is the function to handle the pointer event.\n * @returns - handlePointerLeave - This is the function to handle the pointer leave event.\n */\nexport const usePopover = (\n  elementRef: React.RefObject<HTMLElement | HTMLDivElement>,\n  hoverRef: React.RefObject<HTMLElement | HTMLDivElement>,\n  spacing = 1,\n) => {\n  const [isVisible, setIsVisible] = useState(false)\n  const [popoverPosition, setPopoverPosition] = useState<Position>({\n    top: 0,\n    left: 0,\n  })\n\n  const handlePointerEvent = (\n    event: React.MouseEvent<HTMLButtonElement | HTMLElement>,\n  ) => {\n    event?.stopPropagation()\n    const height = elementRef.current?.offsetHeight || 40\n    if (elementRef.current) {\n      const rect = elementRef.current.getBoundingClientRect()\n      const { scrollY, scrollX, innerHeight } = window\n\n      const popoverTop = rect.bottom + scrollY + spacing\n      const popoverLeft = rect.left + scrollX\n      const popoverBottom = popoverTop + height // Adjust the popover height as needed\n      const popoverHeight = hoverRef.current?.offsetHeight ?? height // Adjust the popover height as needed\n\n      const adjustedTop =\n        popoverBottom > scrollY + innerHeight\n          ? Math.max(\n              scrollY + innerHeight - popoverHeight - height - spacing,\n              scrollY,\n            ) -\n            height -\n            spacing\n          : popoverTop\n\n      setPopoverPosition({\n        top: adjustedTop,\n        left: popoverLeft,\n      })\n      setIsVisible(true)\n    }\n  }\n\n  const handlePointerLeave = () => {\n    setIsVisible(false)\n  }\n\n  return {\n    isVisible,\n    popoverPosition,\n    handlePointerEvent,\n    handlePointerLeave,\n  }\n}\n\nexport default usePopover\n"]}

package/libs/chunk-NZVSXRTB.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var chunkPDD4N5P5_cjs = require('./chunk-PDD4N5P5.cjs');
-var e = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var e__default = /*#__PURE__*/_interopDefault(e);
-
-var P={display:"block",position:"absolute",background:"#000",border:"1px solid #010101",padding:"10px",color:"#fff",transition:"opacity .5s ease-in-out"},o=({children:n,popoverTrigger:l,styles:a,...d})=>{let t=e__default.default.useRef(null),r=e__default.default.useRef(null),{isVisible:p,popoverPosition:s,handlePointerEvent:v,handlePointerLeave:c}=chunkPDD4N5P5_cjs.b(t,r),f={opacity:p?1:0,top:s.top,left:s.left,zIndex:999};return e__default.default.createElement(e__default.default.Fragment,null,e__default.default.createElement("div",{ref:t,onPointerEnter:v,onPointerLeave:c,...d},l),p&&e__default.default.createElement("div",{ref:r,style:{...f,...a}},n))},S=o;o.displayName="Popover";o.styles=P;
-
-exports.a = P;
-exports.b = o;
-exports.c = S;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-NZVSXRTB.cjs.map

package/libs/chunk-NZVSXRTB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/popover/popover.tsx"],"names":["React","defaultStyles","Popover","children","popoverTrigger","styles","props","hoverRef","popOverRef","isVisible","popoverPosition","handlePointerEvent","handlePointerLeave","use_popover_default","popoverStyles","popover_default"],"mappings":"yCAAA,OAAOA,MAAW,QAeX,IAAMC,EAAgB,CAC3B,QAAS,QACT,SAAU,WACV,WAAY,OACZ,OAAQ,oBACR,QAAS,OACT,MAAO,OACP,WAAY,yBACd,EAsBaC,EAAU,CAAC,CACtB,SAAAC,EACA,eAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAiC,CAC/B,IAAMC,EAAWP,EAAM,OAAO,IAAI,EAC5BQ,EAAaR,EAAM,OAAO,IAAI,EAC9B,CAAE,UAAAS,EAAW,gBAAAC,EAAiB,mBAAAC,EAAoB,mBAAAC,CAAmB,EACzEC,EAAWN,EAAUC,CAAU,EAC3BM,EAAgB,CACpB,QAASL,EAAY,EAAI,EACzB,IAAKC,EAAgB,IACrB,KAAMA,EAAgB,KAEtB,OAAQ,GACV,EAEA,OACEV,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,OACC,IAAKO,EACL,eAAgBI,EAChB,eAAgBC,EACf,GAAGN,GAEHF,CACH,EACCK,GACCT,EAAA,cAAC,OAAI,IAAKQ,EAAY,MAAO,CAAE,GAAGM,EAAe,GAAGT,CAAO,GACxDF,CACH,CAEJ,CAEJ,EAEOY,EAAQb,EACfA,EAAQ,YAAc,UACtBA,EAAQ,OAASD","sourcesContent":["import React from 'react'\nimport usePopover from '#hooks/popover/use-popover'\n\n/**\n * Interface for props accepted by the Popover component\n *\n * @property {ReactNode} children - The content to show in the popover\n * @property {ReactNode} [content] - Optional alternative content for popover\n */\nexport type PopoverProps = {\n  children: React.ReactNode\n  popoverTrigger: React.ReactNode\n  styles?: React.CSSProperties\n}\n\nexport const defaultStyles = {\n  display: 'block',\n  position: 'absolute',\n  background: '#000',\n  border: '1px solid #010101',\n  padding: '10px',\n  color: '#fff',\n  transition: 'opacity .5s ease-in-out',\n} as React.CSSProperties\n\n/**\n * Popover component to display popover content.\n *\n * @param props - The props for the component\n * @param props.children - The content to show in the popover\n * @param props.popoverTrigger - The element that triggers the popover on hover\n *\n * @returns JSX.Element - The rendered JSX element for the Popover\n * @example - <Popover popoverTrigger={<button>Hover here</button>}>Popover content</Popover>\n *\n * The component uses the usePopover hook to handle popover visibility and positioning.\n *\n * It renders the triggerElement, and conditionally renders the popover content\n * positioned absolutely when visible.\n *\n * Inline styles handle visuals like background, border, padding, etc.\n *\n * Transforms and opacity animate the enter/exit transition of the popover.\n */\n\nexport const Popover = ({\n  children,\n  popoverTrigger,\n  styles,\n  ...props\n}: PopoverProps): JSX.Element => {\n  const hoverRef = React.useRef(null)\n  const popOverRef = React.useRef(null)\n  const { isVisible, popoverPosition, handlePointerEvent, handlePointerLeave } =\n    usePopover(hoverRef, popOverRef)\n  const popoverStyles = {\n    opacity: isVisible ? 1 : 0,\n    top: popoverPosition.top,\n    left: popoverPosition.left,\n    // transform: `translateY(${isVisible ? '0px' : '-50px'})`,\n    zIndex: 999,\n  } as React.CSSProperties\n\n  return (\n    <>\n      <div\n        ref={hoverRef}\n        onPointerEnter={handlePointerEvent}\n        onPointerLeave={handlePointerLeave}\n        {...props}\n      >\n        {popoverTrigger}\n      </div>\n      {isVisible && (\n        <div ref={popOverRef} style={{ ...popoverStyles, ...styles }}>\n          {children}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default Popover\nPopover.displayName = 'Popover'\nPopover.styles = defaultStyles\n"]}

package/libs/chunk-PDD4N5P5.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-var E=(o,p,n=1)=>{let[a,r]=react.useState(!1),[u,f]=react.useState({top:0,left:0});return {isVisible:a,popoverPosition:u,handlePointerEvent:v=>{v?.stopPropagation();let t=o.current?.offsetHeight||40;if(o.current){let s=o.current.getBoundingClientRect(),{scrollY:e,scrollX:h,innerHeight:i}=window,c=s.bottom+e+n,m=s.left+h,P=c+t,H=p.current?.offsetHeight??t,d=P>e+i?Math.max(e+i-H-t-n,e)-t-n:c;f({top:d,left:m}),r(!0);}},handlePointerLeave:()=>{r(!1);}}},b=E;
-
-exports.a = E;
-exports.b = b;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-PDD4N5P5.cjs.map

package/libs/chunk-PDD4N5P5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/popover/use-popover.tsx"],"names":["useState","usePopover","elementRef","hoverRef","spacing","isVisible","setIsVisible","popoverPosition","setPopoverPosition","event","height","rect","scrollY","scrollX","innerHeight","popoverTop","popoverLeft","popoverBottom","popoverHeight","adjustedTop","use_popover_default"],"mappings":"AAAA,OAAS,YAAAA,MAAgB,QA2BlB,IAAMC,EAAa,CACxBC,EACAC,EACAC,EAAU,IACP,CACH,GAAM,CAACC,EAAWC,CAAY,EAAIN,EAAS,EAAK,EAC1C,CAACO,EAAiBC,CAAkB,EAAIR,EAAmB,CAC/D,IAAK,EACL,KAAM,CACR,CAAC,EAsCD,MAAO,CACL,UAAAK,EACA,gBAAAE,EACA,mBAtCAE,GACG,CACHA,GAAO,gBAAgB,EACvB,IAAMC,EAASR,EAAW,SAAS,cAAgB,GACnD,GAAIA,EAAW,QAAS,CACtB,IAAMS,EAAOT,EAAW,QAAQ,sBAAsB,EAChD,CAAE,QAAAU,EAAS,QAAAC,EAAS,YAAAC,CAAY,EAAI,OAEpCC,EAAaJ,EAAK,OAASC,EAAUR,EACrCY,EAAcL,EAAK,KAAOE,EAC1BI,EAAgBF,EAAaL,EAC7BQ,EAAgBf,EAAS,SAAS,cAAgBO,EAElDS,EACJF,EAAgBL,EAAUE,EACtB,KAAK,IACHF,EAAUE,EAAcI,EAAgBR,EAASN,EACjDQ,CACF,EACAF,EACAN,EACAW,EAENP,EAAmB,CACjB,IAAKW,EACL,KAAMH,CACR,CAAC,EACDV,EAAa,EAAI,CACnB,CACF,EAUE,mBARyB,IAAM,CAC/BA,EAAa,EAAK,CACpB,CAOA,CACF,EAEOc,EAAQnB","sourcesContent":["import { useState } from 'react'\n\ntype Position = {\n  /**\n   * @description This is the top position of the popover.\n   * @default 0\n   */\n  top: number\n  /**\n   * @description This is the left position of the popover.\n   * @default 0\n   */\n  left: number\n}\n\n/**\n * @description This is the hook to show/hide the popover.\n * @param elementRef - This is the ref of the element on which the popover should be shown.\n * @param hoverRef - This is the ref of the element on which the popover should be shown.\n * @param spacing - This is the spacing between the element and the popover.\n * @example - const { isVisible, popoverPosition, handlePointerEvent, handlePointerLeave } = usePopover(hoverRef, popOverRef, 1)\n * @returns - This is the object of the following properties.\n * @returns - isVisible - This is the boolean value to show/hide the popover.\n * @returns - popoverPosition - This is the position of the popover.\n * @returns - handlePointerEvent - This is the function to handle the pointer event.\n * @returns - handlePointerLeave - This is the function to handle the pointer leave event.\n */\nexport const usePopover = (\n  elementRef: React.RefObject<HTMLElement | HTMLDivElement>,\n  hoverRef: React.RefObject<HTMLElement | HTMLDivElement>,\n  spacing = 1,\n) => {\n  const [isVisible, setIsVisible] = useState(false)\n  const [popoverPosition, setPopoverPosition] = useState<Position>({\n    top: 0,\n    left: 0,\n  })\n\n  const handlePointerEvent = (\n    event: React.MouseEvent<HTMLButtonElement | HTMLElement>,\n  ) => {\n    event?.stopPropagation()\n    const height = elementRef.current?.offsetHeight || 40\n    if (elementRef.current) {\n      const rect = elementRef.current.getBoundingClientRect()\n      const { scrollY, scrollX, innerHeight } = window\n\n      const popoverTop = rect.bottom + scrollY + spacing\n      const popoverLeft = rect.left + scrollX\n      const popoverBottom = popoverTop + height // Adjust the popover height as needed\n      const popoverHeight = hoverRef.current?.offsetHeight ?? height // Adjust the popover height as needed\n\n      const adjustedTop =\n        popoverBottom > scrollY + innerHeight\n          ? Math.max(\n              scrollY + innerHeight - popoverHeight - height - spacing,\n              scrollY,\n            ) -\n            height -\n            spacing\n          : popoverTop\n\n      setPopoverPosition({\n        top: adjustedTop,\n        left: popoverLeft,\n      })\n      setIsVisible(true)\n    }\n  }\n\n  const handlePointerLeave = () => {\n    setIsVisible(false)\n  }\n\n  return {\n    isVisible,\n    popoverPosition,\n    handlePointerEvent,\n    handlePointerLeave,\n  }\n}\n\nexport default usePopover\n"]}

package/libs/chunk-S7NIA6PI.cjs

@@ -1,17 +0,0 @@
-'use strict';
-
-var chunkPNWIRCG3_cjs = require('./chunk-PNWIRCG3.cjs');
-var chunkTON2YGMD_cjs = require('./chunk-TON2YGMD.cjs');
-var chunk66C2J4IX_cjs = require('./chunk-66C2J4IX.cjs');
-var D = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var D__default = /*#__PURE__*/_interopDefault(D);
-
-var r=({type:a="button",children:n,styles:p,disabled:i,isDisabled:l,classes:m,onPointerDown:u,onPointerOver:d,onPointerLeave:b,onClick:P,onKeyDown:c,...y})=>{let B=chunkPNWIRCG3_cjs.a(i,l),{disabledProps:t,handlers:f}=chunkTON2YGMD_cjs.a(B,{handlers:{onClick:P,onPointerDown:u,onKeyDown:c},className:m});return D__default.default.createElement(chunk66C2J4IX_cjs.a,{as:"button",type:a,"aria-disabled":t["aria-disabled"],onPointerOver:d,onPointerLeave:b,style:p,className:t.className,...f,...y},n)};var h=r;r.displayName="Button";
-
-exports.a = r;
-exports.b = h;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-S7NIA6PI.cjs.map

package/libs/chunk-S7NIA6PI.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","isDisabled","classes","onPointerDown","onPointerOver","onPointerLeave","onClick","onKeyDown","props","isActuallyDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","ui_default","button_default"],"mappings":"2HACA,OAAOA,MAAW,QAmEX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAmB,CAEjB,IAAMC,EAAqBC,EAAqBV,EAAUC,CAAU,EAG9D,CAAE,cAAAU,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,QAAAH,EACA,cAAAH,EACA,UAAAI,CACF,EAEA,UAAWL,CAGb,CACF,EAGA,OACEP,EAAA,cAACmB,EAAA,CACC,GAAG,SACH,KAAMjB,EACN,gBAAec,EAAc,eAAe,EAC5C,cAAeP,EACf,eAAgBC,EAChB,MAAON,EACP,UAAWY,EAAc,UACxB,GAAGC,EACH,GAAGJ,GAEHV,CACH,CAEJ,EAMA,IAAOiB,EAAQnB,EACfA,EAAO,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\nimport { useDisabledState } from \"../../hooks/use-disabled-state\";\nimport { resolveDisabledState } from \"../../utils/accessibility\";\nimport type { DisabledStateProps } from \"../../types/shared\";\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: \"button\" | \"submit\" | \"reset\";\n  };\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = \"button\",\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled);\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    }\n  );\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      aria-disabled={disabledProps[\"aria-disabled\"]}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...handlers}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport const IconButton = ({ icon, ...props }: ButtonProps) => {\n  return <Button {...props}>{icon}</Button>;\n};\n\nexport default Button;\nButton.displayName = \"Button\";\n"]}

package/libs/chunk-X2RDXWH5.js

@@ -1,10 +0,0 @@
-import { a } from './chunk-BFK62VX5.js';
-import { a as a$1 } from './chunk-75QHTLFO.js';
-import { a as a$2 } from './chunk-4KJP3L35.js';
-import D from 'react';
-
-var r=({type:a$3="button",children:n,styles:p,disabled:i,isDisabled:l,classes:m,onPointerDown:u,onPointerOver:d,onPointerLeave:b,onClick:P,onKeyDown:c,...y})=>{let B=a(i,l),{disabledProps:t,handlers:f}=a$1(B,{handlers:{onClick:P,onPointerDown:u,onKeyDown:c},className:m});return D.createElement(a$2,{as:"button",type:a$3,"aria-disabled":t["aria-disabled"],onPointerOver:d,onPointerLeave:b,style:p,className:t.className,...f,...y},n)};var h=r;r.displayName="Button";
-
-export { r as a, h as b };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-X2RDXWH5.js.map

package/libs/chunk-X2RDXWH5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","isDisabled","classes","onPointerDown","onPointerOver","onPointerLeave","onClick","onKeyDown","props","isActuallyDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","ui_default","button_default"],"mappings":"wHACA,OAAOA,MAAW,QAmEX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAmB,CAEjB,IAAMC,EAAqBC,EAAqBV,EAAUC,CAAU,EAG9D,CAAE,cAAAU,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,QAAAH,EACA,cAAAH,EACA,UAAAI,CACF,EAEA,UAAWL,CAGb,CACF,EAGA,OACEP,EAAA,cAACmB,EAAA,CACC,GAAG,SACH,KAAMjB,EACN,gBAAec,EAAc,eAAe,EAC5C,cAAeP,EACf,eAAgBC,EAChB,MAAON,EACP,UAAWY,EAAc,UACxB,GAAGC,EACH,GAAGJ,GAEHV,CACH,CAEJ,EAMA,IAAOiB,EAAQnB,EACfA,EAAO,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\nimport { useDisabledState } from \"../../hooks/use-disabled-state\";\nimport { resolveDisabledState } from \"../../utils/accessibility\";\nimport type { DisabledStateProps } from \"../../types/shared\";\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: \"button\" | \"submit\" | \"reset\";\n  };\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = \"button\",\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled);\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    }\n  );\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      aria-disabled={disabledProps[\"aria-disabled\"]}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...handlers}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport const IconButton = ({ icon, ...props }: ButtonProps) => {\n  return <Button {...props}>{icon}</Button>;\n};\n\nexport default Button;\nButton.displayName = \"Button\";\n"]}