@jamsrui/icon-button 0.0.12 → 0.0.14

package/dist/icon-button-config.d.mts

@@ -1,8 +1,10 @@
-import { I as IconButton } from './icon-button-CNSWjtbn.mjs';
+import { IconButton } from './icon-button.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GlobalConfigProps } from '@jamsrui/core';
+import './use-icon-button.mjs';
 import 'react';
 import '@jamsrui/utils';
+import './icon-button-root.mjs';
 import './styles.mjs';
 
 declare const useIconButtonConfig: () => Record<string, any>;

package/dist/icon-button-config.mjs

@@ -1 +1 @@
-import{a,b}from"./chunk-WOIOR7OF.mjs";export{a as IconButtonConfig,b as useIconButtonConfig};
+"use client";import{createConfigContext as o}from"@jamsrui/utils";const[n,e]=o({displayName:"IconButtonConfig"});export{n as IconButtonConfig,e as useIconButtonConfig};

package/dist/icon-button-context.d.mts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { useIconButton } from './use-icon-button.mjs';
+import '@jamsrui/utils';
+import './icon-button-root.mjs';
+import './styles.mjs';
+
+declare const useIconButtonContext: () => IconButtonContext.Props;
+declare const IconButtonContext: react.Context<IconButtonContext.Props | null>;
+declare namespace IconButtonContext {
+    interface Props extends ReturnType<typeof useIconButton> {
+    }
+}
+
+export { IconButtonContext, useIconButtonContext };

package/dist/icon-button-context.mjs

@@ -0,0 +1 @@
+"use client";import{createContext as o,use as n}from"react";const e=o(null),s=()=>{const t=n(e);if(!t)throw new Error("useIconButtonContext must be used within a IconButtonContext");return t};export{e as IconButtonContext,s as useIconButtonContext};

package/dist/icon-button-label.d.mts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const IconButtonLabel: () => react_jsx_runtime.JSX.Element;
+
+export { IconButtonLabel };

package/dist/icon-button-label.mjs

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useIconButtonContext as n}from"./icon-button-context.mjs";const s=()=>{const{getLabelProps:o,label:t}=n();return e("span",{...o({}),children:t})};export{s as IconButtonLabel};

package/dist/icon-button-loading.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const IconButtonLoading: (props: IconButtonLoading.Props) => react_jsx_runtime.JSX.Element;
+declare namespace IconButtonLoading {
+    interface Props {
+        children?: React.ReactNode;
+    }
+}
+
+export { IconButtonLoading };

package/dist/icon-button-loading.mjs

@@ -0,0 +1 @@
+"use client";import{jsx as o}from"react/jsx-runtime";import{useIconButtonContext as c}from"./icon-button-context.mjs";import{LoadingSpinner as a}from"./spinner.mjs";const s=t=>{const{children:e=o(a,{})}=t,{isLoading:n}=c();return o("span",{className:n?"":"hidden",children:n?e:null})};export{s as IconButtonLoading};

package/dist/icon-button-root.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import { UIProps } from '@jamsrui/utils';
+
+declare const IconButtonRoot: (props: PropsWithChildren) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace IconButtonRoot {
+    interface Props extends UIProps<"button"> {
+    }
+}
+
+export { IconButtonRoot };

package/dist/icon-button-root.mjs

@@ -0,0 +1 @@
+import{Fragment as c,jsx as o,jsxs as d}from"react/jsx-runtime";import{useRenderElement as p}from"@jamsrui/hooks";import{useIconButtonContext as i}from"./icon-button-context.mjs";import{IconButtonLabel as m}from"./icon-button-label.mjs";import{LoadingSpinner as s}from"./spinner.mjs";const x=t=>{const{getButtonProps:n,loadingIcon:r=o(s,{}),isLoading:e}=i();return p("button",{props:[n(),{children:d(c,{children:[o(m,{}),e?r:t.children]})}]})};export{x as IconButtonRoot};

package/dist/icon-button.d.mts

@@ -1,4 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useIconButton } from './use-icon-button.mjs';
 import 'react';
-export { I as IconButton } from './icon-button-CNSWjtbn.mjs';
 import '@jamsrui/utils';
+import './icon-button-root.mjs';
 import './styles.mjs';
+
+declare const IconButton: (props: IconButton.Props) => react_jsx_runtime.JSX.Element;
+declare namespace IconButton {
+    interface Props extends useIconButton.Props {
+    }
+}
+
+export { IconButton };

package/dist/icon-button.mjs

@@ -1 +1 @@
-import{a}from"./chunk-67ROXZH3.mjs";import"./chunk-BK47RZ6L.mjs";import"./chunk-5BXYNIKP.mjs";export{a as IconButton};
+"use client";import{jsx as t}from"react/jsx-runtime";import{IconButtonContext as e}from"./icon-button-context.mjs";import{IconButtonRoot as r}from"./icon-button-root.mjs";import{useIconButton as u}from"./use-icon-button.mjs";const p=o=>{const{children:n}=o,c=u(o);return t(e,{value:c,children:t(r,{children:n})})};export{p as IconButton};

package/dist/index.d.mts

@@ -1,7 +1,9 @@
-export { I as IconButton } from './icon-button-CNSWjtbn.mjs';
+export { IconButton } from './icon-button.mjs';
 export { IconButtonConfig, useIconButtonConfig } from './icon-button-config.mjs';
+import 'react/jsx-runtime';
+import './use-icon-button.mjs';
 import 'react';
 import '@jamsrui/utils';
+import './icon-button-root.mjs';
 import './styles.mjs';
-import 'react/jsx-runtime';
 import '@jamsrui/core';

package/dist/index.mjs

@@ -1 +1 @@
-"use client";import{a as o,b as n}from"./chunk-WOIOR7OF.mjs";import{a as t}from"./chunk-67ROXZH3.mjs";import"./chunk-BK47RZ6L.mjs";import"./chunk-5BXYNIKP.mjs";export{t as IconButton,o as IconButtonConfig,n as useIconButtonConfig};
+import{IconButton as t}from"./icon-button.mjs";import{IconButtonConfig as r,useIconButtonConfig as u}from"./icon-button-config.mjs";export{t as IconButton,r as IconButtonConfig,u as useIconButtonConfig};

package/dist/spinner.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {
+    size?: number;
+};
+declare const LoadingSpinner: (props: Props) => react_jsx_runtime.JSX.Element;
+
+export { LoadingSpinner };

package/dist/spinner.mjs

@@ -0,0 +1 @@
+import{jsx as t,jsxs as i}from"react/jsx-runtime";const o=e=>{const{size:r=20}=e;return t("svg",{fill:"currentColor",height:r,viewBox:"0 0 24 24",width:r,xmlns:"http://www.w3.org/2000/svg",children:i("g",{children:[t("rect",{height:5,opacity:".14",width:2,x:11,y:1}),t("rect",{height:5,opacity:".29",transform:"rotate(30 12 12)",width:2,x:11,y:1}),t("rect",{height:5,opacity:".43",transform:"rotate(60 12 12)",width:2,x:11,y:1}),t("rect",{height:5,opacity:".57",transform:"rotate(90 12 12)",width:2,x:11,y:1}),t("rect",{height:5,opacity:".71",transform:"rotate(120 12 12)",width:2,x:11,y:1}),t("rect",{height:5,opacity:".86",transform:"rotate(150 12 12)",width:2,x:11,y:1}),t("rect",{height:5,transform:"rotate(180 12 12)",width:2,x:11,y:1}),t("animateTransform",{attributeName:"transform",calcMode:"discrete",dur:"0.75s",repeatCount:"indefinite",type:"rotate",values:"0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"})]})})};export{o as LoadingSpinner};

package/dist/styles.d.mts

@@ -18,7 +18,6 @@ declare const iconButtonVariants: _jamsrui_utils.TVReturnType<{
         flat: string;
     };
     size: {
-        xs: string;
         sm: string;
         md: string;
         lg: string;
@@ -54,7 +53,6 @@ declare const iconButtonVariants: _jamsrui_utils.TVReturnType<{
         flat: string;
     };
     size: {
-        xs: string;
         sm: string;
         md: string;
         lg: string;
@@ -90,7 +88,6 @@ declare const iconButtonVariants: _jamsrui_utils.TVReturnType<{
         flat: string;
     };
     size: {
-        xs: string;
         sm: string;
         md: string;
         lg: string;

package/dist/styles.mjs

@@ -1 +1 @@
-import{a}from"./chunk-5BXYNIKP.mjs";export{a as iconButtonVariants};
+import{allColors as r,allVariants as i,colorVariants as n,radiusBaseVariant as e,tv as o}from"@jamsrui/utils";const d=o({base:["icon-button","z-0","cursor-default","shrink-0","group","relative","inline-flex","items-center","justify-center","box-border","appearance-none","outline-none","select-none","whitespace-nowrap","min-w-max","font-medium","tap-highlight-transparent","transition-transform duration-300","focus-visible:ring-2 focus-visible:ring-primary","data-disabled:cursor-not-allowed data-disabled:opacity-60","text-transform-inherit"],variants:{color:{default:"",primary:"",secondary:"",success:"",warning:"",danger:""},variant:{solid:"",bordered:"border bg-transparent",light:"",text:"",flat:""},size:{sm:"size-6 rounded",md:"size-8 min-w-8 rounded-lg",lg:"size-10 min-w-10 rounded-xl"},disableAnimation:{true:"transition-none!",false:"data-pressed:scale-98"},radius:e},compoundVariants:[...i.flatMap(a=>r.map(t=>({variant:a,color:t,className:n[a][t]})))],defaultVariants:{variant:"solid",color:"default",size:"md",radius:"md",disableAnimation:!1}});export{d as iconButtonVariants};

package/dist/use-icon-button.d.mts

@@ -1,4 +1,22 @@
-import 'react';
-import '@jamsrui/utils';
-export { u as useIconButton } from './icon-button-CNSWjtbn.mjs';
-import './styles.mjs';
+import * as react from 'react';
+import { PropGetter } from '@jamsrui/utils';
+import { IconButtonRoot } from './icon-button-root.mjs';
+import { IconButtonVariantProps } from './styles.mjs';
+
+declare const useIconButton: (props: useIconButton.Props) => {
+    getButtonProps: () => Partial<IconButtonRoot.Props>;
+    getLabelProps: PropGetter<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+    isLoading: boolean;
+    isDisabled: boolean;
+    label: string;
+    loadingIcon: react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | undefined;
+};
+declare namespace useIconButton {
+    interface Props extends IconButtonVariantProps, IconButtonRoot.Props {
+        label: string;
+        isLoading?: boolean;
+        loadingIcon?: React.ReactElement;
+    }
+}
+
+export { useIconButton };

package/dist/use-icon-button.mjs

@@ -1 +1 @@
-import{a}from"./chunk-BK47RZ6L.mjs";import"./chunk-5BXYNIKP.mjs";export{a as useIconButton};
+import{useCallback as P,useId as V,useMemo as h}from"react";import{useHover as C,useMergeRefs as L,usePress as N}from"@jamsrui/hooks";import{cn as A,dataAttr as e,dataAttrDev as D,mapPropsVariants as G}from"@jamsrui/utils";import{iconButtonVariants as b}from"./styles.mjs";const $=I=>{const[g,B]=G(I,b.variantKeys),{type:r="button",label:a,isLoading:t=!1,disabled:y=!1,className:n,ref:R,loadingIcon:i,...p}=g,c=b(B),s=V(),o=t||y,{isHovered:d,ref:v}=C({isDisabled:o}),{isPressed:l,ref:x}=N({isDisabled:o}),m=L([R,v,x]),u=P(()=>({...p,ref:m,"data-component":D("icon-button"),className:A(c,n),"aria-labelledby":s,type:r,disabled:o,"data-disabled":e(o),"aria-disabled":e(o),"data-loading":e(t),"data-pressed":e(l),"data-hover":e(d)}),[n,s,o,d,t,l,m,p,c,r]),f=P(()=>({"aria-hidden":!0,id:s,className:"sr-only"}),[s]);return h(()=>({getButtonProps:u,getLabelProps:f,isLoading:t,isDisabled:o,label:a,loadingIcon:i}),[u,f,o,t,a,i])};export{$ as useIconButton};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jamsrui/icon-button",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "peerDependencies": {
     "react": ">=19"
   },
   "dependencies": {
-    "@jamsrui/core": "^0.0.10",
-    "@jamsrui/utils": "^0.0.12",
-    "@jamsrui/hooks": "^0.0.12"
+    "@jamsrui/hooks": "^0.0.14",
+    "@jamsrui/utils": "^0.0.14",
+    "@jamsrui/core": "^0.0.12"
   },
   "exports": {
     ".": {

package/dist/chunk-5BXYNIKP.mjs

@@ -1 +0,0 @@
-import{allColors as i,allVariants as t,colorVariants as e,radiusBaseVariant as n,tv as s}from"@jamsrui/utils";var d=s({base:["z-0","cursor-default","shrink-0","group","relative","inline-flex","items-center","justify-center","box-border","appearance-none","outline-none","select-none","whitespace-nowrap","min-w-max","font-medium","tap-highlight-transparent","transition-transform duration-300","focus-visible:ring-2 focus-visible:ring-primary","data-disabled:cursor-not-allowed data-disabled:opacity-60","text-transform-inherit"],variants:{color:{default:"",primary:"",secondary:"",success:"",warning:"",danger:""},variant:{solid:"",bordered:"border bg-transparent",light:"",text:"",flat:""},size:{xs:"size-6 rounded",sm:"size-8 min-w-8 rounded-lg",md:"size-10 min-w-10 rounded-xl",lg:"size-12 min-w-12 rounded-2xl"},disableAnimation:{true:"transition-none!",false:"data-pressed:scale-98"},radius:n},compoundVariants:[...t.flatMap(a=>i.map(r=>({variant:a,color:r,className:e[a][r]})))],defaultVariants:{variant:"solid",color:"default",size:"md",radius:"md",disableAnimation:!1}});export{d as a};

package/dist/chunk-67ROXZH3.mjs

@@ -1 +0,0 @@
-import{a as t}from"./chunk-BK47RZ6L.mjs";import{useRenderElement as p}from"@jamsrui/hooks";import{Fragment as d,jsx as u,jsxs as m}from"react/jsx-runtime";var I=o=>{let{children:n}=o,e=t(o),{getButtonProps:r,getLabelProps:s}=e,c=m(d,{children:[u("span",{...s({})}),n]});return p("button",{props:[r(),{children:c}]})};export{I as a};

package/dist/chunk-BK47RZ6L.mjs

@@ -1 +0,0 @@
-import{a as r}from"./chunk-5BXYNIKP.mjs";import{useCallback as b,useId as x,useMemo as R}from"react";import{useHover as V,useMergeRefs as h,usePress as C}from"@jamsrui/hooks";import{cn as L,dataAttr as e,dataAttrDev as N,mapPropsVariants as A}from"@jamsrui/utils";var k=P=>{let[f,y]=A(P,r.variantKeys),{type:a="button",label:G,isDisabled:I=!1,isLoading:t=!1,disabled:B=!1,className:n,ref:g,...i}=f,p=r(y),s=x(),o=I||t||B,{isHovered:l,ref:v}=V({isDisabled:o}),{isPressed:d,ref:D}=C({isDisabled:o}),c=h([g,v,D]),m=b(()=>({...i,ref:c,"data-component":N("icon-button"),className:L(p,n),"aria-labelledby":s,type:a,disabled:o,"data-disabled":e(o),"aria-disabled":e(o),"data-loading":e(t),"data-pressed":e(d),"data-hover":e(l)}),[n,s,o,l,t,d,c,i,p,a]),u=b(()=>({"aria-hidden":!0,id:s,className:"sr-only"}),[s]);return R(()=>({getButtonProps:m,getLabelProps:u,isLoading:t,isDisabled:o}),[m,u,o,t])};export{k as a};

package/dist/chunk-WOIOR7OF.mjs

@@ -1 +0,0 @@
-import{createConfigContext as o}from"@jamsrui/utils";var[n,r]=o({displayName:"IconButtonConfig"});export{n as a,r as b};

package/dist/icon-button-CNSWjtbn.d.mts

@@ -1,25 +0,0 @@
-import * as react from 'react';
-import { PropGetter, UIProps } from '@jamsrui/utils';
-import { IconButtonVariantProps } from './styles.mjs';
-
-declare const useIconButton: (props: useIconButton.Props) => {
-    getButtonProps: () => Partial<IconButton.Props>;
-    getLabelProps: PropGetter<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
-    isLoading: boolean;
-    isDisabled: boolean;
-};
-declare namespace useIconButton {
-    interface Props extends IconButtonVariantProps, UIProps<"button"> {
-        label: string;
-        isDisabled?: boolean;
-        isLoading?: boolean;
-    }
-}
-
-declare const IconButton: (props: IconButton.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
-declare namespace IconButton {
-    interface Props extends useIconButton.Props {
-    }
-}
-
-export { IconButton as I, useIconButton as u };