@sprocketui-react/button 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,19 @@
+<div align="center">
+  <a href="https://sprocketui.com">
+    <img alt="Necto Logo" src="https://avatars.githubusercontent.com/u/206497492?s=100&v=4">
+  <a>
+
+  <h2>Sprocket UI React - Button</h2>
+
+  <p>Sprocket's standalone button component for React based projects.</p>
+
+  <a aria-label="Corinvo" href="https://corinvo.github.io">
+    <img src="https://img.shields.io/badge/Made%20by-Corinvo-black.svg?style=for-the-badge&color=black">
+  </a>
+  <a href="https://www.npmjs.com/package/@sprocketui-react/button">
+    <img alt="NPM version" src="https://img.shields.io/npm/v/@sprocketui-react/button.svg?style=for-the-badge">
+  </a>
+  <a aria-label="License" href="https://github.com/sprocketui/NodeKit/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-97CA25.svg?style=for-the-badge">
+  </a>
+</div>

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var L=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var Z=(t,e)=>{for(var s in e)L(t,s,{get:e[s],enumerable:!0})},tt=(t,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Q(e))!Y.call(t,n)&&n!==s&&L(t,n,{get:()=>e[n],enumerable:!(i=K(e,n))||i.enumerable});return t};var et=t=>tt(L({},"__esModule",{value:!0}),t);var ot={};Z(ot,{Button:()=>C,ButtonContext:()=>a,SprocketButton:()=>C,SprocketButtonContext:()=>a,useButton:()=>B,useButtonContext:()=>g,useSprocketButton:()=>B,useSprocketButtonContext:()=>g});module.exports=et(ot);var p=require("@necto-react/hooks"),u=require("@necto/dom"),A=require("@necto/mergers"),M=require("@necto-react/helpers"),E=require("shared"),H=u.HTMLElements.Button;function B(t,e){let{rel:s,href:i,target:n,autoFocus:f,focusDisabled:d,preventFocusOnPress:k,isDisabled:o=!1,type:b="button",as:x=H,elementType:r=x||H,onClick:l,onPress:R,onPressStart:y,onPressEnd:T,onPressUp:c,onPressChange:j}=t,F;r===u.HTMLElements.Button?F={type:b,disabled:o}:F={role:"button",href:r===u.HTMLElements.A&&!o?i:void 0,target:r===u.HTMLElements.A?n:void 0,type:r===u.HTMLElements.Input?b:void 0,disabled:r===u.HTMLElements.Input?o:void 0,"aria-disabled":!o||r===u.HTMLElements.Input?void 0:o,rel:r===u.HTMLElements.A?s:void 0};let{hoverProps:V,isHovered:G}=(0,p.useHover)({...t,isDisabled:o}),{focusProps:W,isFocused:X,isFocusVisible:$}=(0,p.useFocusRing)({autoFocus:f}),{focusableProps:O}=(0,p.useFocusable)(t,e),{pressProps:q,isPressed:z}=(0,p.usePress)({ref:e,isDisabled:o,preventFocusOnPress:k,onPressStart:y,onPressEnd:T,onPressChange:j,onPress:R,onPressUp:c,onClick:l});d&&(O.tabIndex=o?-1:O.tabIndex);let J=(0,A.mergeProps)(O,q,V,W,(0,M.filterDOMProps)(t,{allowLabelableProps:!0,allowedLabelableProps:new Set([]),allowedLinkProps:new Set(E.ANCHOR_ELEMENT_PROPS),extraAllowedProps:new Set(E.ALLOWED_EXTERNAL_PROPS)}));return{isFocused:X,isPressed:z,isHovered:G,isDisabled:o,isFocusVisible:$,elementType:r,buttonProps:(0,A.mergeProps)(J,F)}}var S=require("react"),a=(0,S.createContext)(null);var U=require("react");function g(){return(0,U.useContext)(a)}var w=require("@necto/strings"),I=require("@necto/mergers"),P=require("react"),N=require("shared"),D=require("@necto-react/components");var m=require("@necto-react/hooks"),h=require("react/jsx-runtime"),_="Button";function v(t,e){[t,e]=(0,m.useContextProps)({props:t,ref:e,context:a});let{buttonProps:s,isHovered:i,isPressed:n,isFocused:f,isDisabled:d,elementType:k,isFocusVisible:o}=B(t,e),b=(0,m.useId)({defaultId:s.id}),x=(0,m.useRenderer)({...t,values:{isHovered:i,isPressed:n,isFocused:f,isFocusVisible:o,isDisabled:d},defaultClassName:(0,N.buildInternalIdentifier)({component:_}),style:l=>({...t.style instanceof Function?t.style(l):t.style})}),r=(0,P.useMemo)(()=>{let l={hover:i,focus:f,focusVisible:o,disabled:d,pressed:n},R={},y=[];for(let[T,c]of Object.entries(l))typeof c=="boolean"&&(R[`data-${(0,w.kebabCase)(T)}`]=c?String(!0):void 0,c&&y.push((0,w.kebabCase)(T)));return{...R,"data-sprocket-state":y.join(" ")}},[i,f,o,d,n]);return(0,h.jsxs)(D.Primitive,{ref:e,as:k,...x,...(0,I.mergeProps)(s,r),id:b,slot:t.slot||void 0,children:["''",x.children]})}var C=Object.assign((0,P.forwardRef)((t,e)=>v(t,e)),{Root:(0,P.forwardRef)((t,e)=>v(t,e))});C.displayName=_;0&&(module.exports={Button,ButtonContext,SprocketButton,SprocketButtonContext,useButton,useButtonContext,useSprocketButton,useSprocketButtonContext});

package/dist/index.d.cts

@@ -0,0 +1,93 @@
+import { ElementType, HTMLAttributes, RefObject, Context, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ButtonOptions } from '@sprocketui-types/button';
+import { RenderProps } from '@necto-react/types';
+
+/**
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+interface UseButtonProps<T extends ElementType> extends ButtonOptions<T> {
+    elementType?: string;
+    preventFocusOnPress?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    isDisabled?: boolean;
+    onClick?: (e: any) => void;
+    onPress?: (e: any) => void;
+    onPressStart?: (e: any) => void;
+    onPressEnd?: (e: any) => void;
+    onPressUp?: (e: any) => void;
+    onPressChange?: (isPressed: boolean) => void;
+}
+type ButtonHookReturn<T extends ElementType> = Readonly<{
+    elementType: T;
+    buttonProps: HTMLAttributes<any>;
+    isPressed: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isFocusVisible: boolean;
+}>;
+
+declare const DEFAULT_BUTTON_TAG: keyof HTMLElementTagNameMap;
+/**
+ * React hook that provides all necessary props and state for a headless button component.
+ *
+ * @template T The element type to render as (e.g., 'button', 'a', 'input').
+ * @param {UseButtonProps<T>} props - The props for configuring the button's behavior and accessibility.
+ * @param {RefObject<any>} ref - The ref to the button element.
+ * @returns {ButtonHookReturn<T>} An object containing readonly state and props for the button element.
+ */
+declare function useButton<T extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: UseButtonProps<T>, ref: RefObject<any>): ButtonHookReturn<T>;
+
+/**
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+declare const ButtonContext: Context<any>;
+
+/**
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+declare function useButtonContext(): any;
+
+/**
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/**
+ * Props for the Button component.
+ */
+interface ButtonProps extends ButtonOptions<ElementType>, RenderProps<any>, UseButtonProps<ElementType> {
+    slot?: string | null;
+}
+
+/**
+ * The public Button component for Sprocket UI.
+ *
+ * @param {ButtonProps} props - The props for the Button component.
+ * @param {ForwardedRef<HTMLButtonElement>} ref - The forwarded ref for the button element.
+ * @returns {ReactElement | null} The rendered button element or null.
+ */
+declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>> & {
+    Root: ForwardRefExoticComponent<Omit<ButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>>;
+};
+
+export { Button, ButtonContext, type ButtonProps, Button as SprocketButton, ButtonContext as SprocketButtonContext, type ButtonProps as SprocketButtonProps, type UseButtonProps, type UseButtonProps as UseSprocketButtonProps, useButton, useButtonContext, useButton as useSprocketButton, useButtonContext as useSprocketButtonContext };

package/dist/index.d.ts

@@ -1,67 +1,93 @@
+import { ElementType, HTMLAttributes, RefObject, Context, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ButtonOptions } from '@sprocketui-types/button';
+import { RenderProps } from '@necto-react/types';
+
 /**
- * Copyright (c) Corinvo, LLC. and affiliates. 
- * 
- * This source code is licensed under the MIT license found in the 
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- * 
+ *
  */
 
-import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, RefObject, HTMLAttributes } from 'react';
-
-declare enum ButtonTypeValues {
-    Button = "button",
-    Submit = "submit",
-    Reset = "reset"
-}
-type ButtonTypes = `${ButtonTypeValues}`;
-
-declare const DEFAULT_BUTTON_TAG$1: "button";
-type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG$1> = ComponentPropsWithoutRef<TTag> & {
-    as?: TTag;
-    type?: ButtonTypes;
-    disabled?: boolean;
-    autoFocus?: boolean;
-    slot?: Record<string, any>;
-};
-declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps<ElementType>, "ref"> & react.RefAttributes<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | react.ComponentClass<any, any> | react.FunctionComponent<any>>> & {
-    Root: react.ForwardRefExoticComponent<Omit<ButtonProps<ElementType>, "ref"> & react.RefAttributes<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | react.ComponentClass<any, any> | react.FunctionComponent<any>>>;
-};
-
-declare const DEFAULT_BUTTON_TAG: "button";
-interface UseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    as?: TTag;
-    type?: ButtonTypes;
-    disabled?: boolean;
-    isDisabled?: boolean;
-    autoFocus?: boolean;
-    slot?: Record<string, any>;
+interface UseButtonProps<T extends ElementType> extends ButtonOptions<T> {
     elementType?: string;
     preventFocusOnPress?: boolean;
-    allowFocusWhenDisabled?: boolean;
     href?: string;
     target?: string;
     rel?: string;
+    isDisabled?: boolean;
     onClick?: (e: any) => void;
     onPress?: (e: any) => void;
     onPressStart?: (e: any) => void;
     onPressEnd?: (e: any) => void;
     onPressUp?: (e: any) => void;
     onPressChange?: (isPressed: boolean) => void;
-    [key: string]: any;
 }
-interface UseButtonResult<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    buttonProps: HTMLAttributes<HTMLElement>;
-    Tag: TTag;
-    combinedSlot: Record<string, any>;
+type ButtonHookReturn<T extends ElementType> = Readonly<{
+    elementType: T;
+    buttonProps: HTMLAttributes<any>;
     isPressed: boolean;
     isHovered: boolean;
     isFocused: boolean;
-    isFocusVisible: boolean;
     isDisabled: boolean;
-    id: string;
+    isFocusVisible: boolean;
+}>;
+
+declare const DEFAULT_BUTTON_TAG: keyof HTMLElementTagNameMap;
+/**
+ * React hook that provides all necessary props and state for a headless button component.
+ *
+ * @template T The element type to render as (e.g., 'button', 'a', 'input').
+ * @param {UseButtonProps<T>} props - The props for configuring the button's behavior and accessibility.
+ * @param {RefObject<any>} ref - The ref to the button element.
+ * @returns {ButtonHookReturn<T>} An object containing readonly state and props for the button element.
+ */
+declare function useButton<T extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: UseButtonProps<T>, ref: RefObject<any>): ButtonHookReturn<T>;
+
+/**
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+declare const ButtonContext: Context<any>;
+
+/**
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+declare function useButtonContext(): any;
+
+/**
+ * Copyright (c) Corinvo, LLC. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/**
+ * Props for the Button component.
+ */
+interface ButtonProps extends ButtonOptions<ElementType>, RenderProps<any>, UseButtonProps<ElementType> {
+    slot?: string | null;
 }
-declare function useButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(props: UseButtonProps<TTag>, ref: RefObject<HTMLElement> | undefined): UseButtonResult<TTag>;
 
-export { Button, ButtonTypeValues, useButton };
-export type { ButtonTypes };
+/**
+ * The public Button component for Sprocket UI.
+ *
+ * @param {ButtonProps} props - The props for the Button component.
+ * @param {ForwardedRef<HTMLButtonElement>} ref - The forwarded ref for the button element.
+ * @returns {ReactElement | null} The rendered button element or null.
+ */
+declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>> & {
+    Root: ForwardRefExoticComponent<Omit<ButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>>;
+};
+
+export { Button, ButtonContext, type ButtonProps, Button as SprocketButton, ButtonContext as SprocketButtonContext, type ButtonProps as SprocketButtonProps, type UseButtonProps, type UseButtonProps as UseSprocketButtonProps, useButton, useButtonContext, useButton as useSprocketButton, useButtonContext as useSprocketButtonContext };