@snowball-tech/fractal/dist/ToggleGroup/ToggleGroupItem.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as i}from"../utils-K22C_6qC.js";import{disabledVariantClassNames as a,variantClassNames as o}from"../Toggle/Toggle.constants.js";import{GROUP_NAME as s}from"./ToggleGroup.constants.js";import{ToggleGroupContext as c}from"./ToggleGroupContext.js";import{forwardRef as l,useContext as u,useImperativeHandle as d,useRef as f}from"react";import p from"lodash/fp/isEmpty.js";import m from"lodash/fp/isFunction.js";import h from"lodash/fp/isString.js";import g from"lodash/fp/omit.js";import{jsx as _,jsxs as v}from"react/jsx-runtime";import*as y from"@radix-ui/react-toggle-group";const b=l(({children:l,disabled:b=!1,fullWidth:x=!1,icon:S,iconOnly:C=!1,label:w,labelElement:T,onToggle:E,value:D,...O},k)=>{let A=!!l;!A&&!w&&console.warn("You must provide a `label` or `children` to the `ToggleGroupItem` component");let j=h(w)?w:p(w)?i(l):i(w),M=f(null);d(k,()=>M.current);let N={primary:`bg-white text-dark aria-unchecked:shadow-subtle aria-unchecked:hover:shadow-brutal aria-unchecked:focus:shadow-brutal aria-unchecked:active:shadow-none border-1 border-normal aria-unchecked:active:-translate-x-quarter aria-unchecked:active:translate-y-half aria-unchecked:hover:translate-x-0 aria-unchecked:hover:-translate-y-quarter aria-unchecked:focus:translate-x-0 aria-unchecked:focus:-translate-y-quarter aria-checked:bg-secondary aria-checked:text-light`,secondary:`bg-white text-dark aria-unchecked:hover:bg-primary aria-unchecked:focus:bg-primary aria-unchecked:active:bg-black  aria-unchecked:active:text-light border-1 border-normal aria-checked:bg-secondary aria-checked:text-light`},P={primary:`bg-white text-disabled shadow-none border-1 border-disabled aria-checked:bg-secondary aria-checked:text-disabled`,secondary:`bg-white text-disabled shadow-none border-1 border-disabled aria-checked:bg-secondary aria-checked:text-disabled`},{disabled:F,grouped:I,orientation:L,variant:R}=u(c),z=e=>{M?.current?.blur(),m(E)&&E(e.currentTarget.attributes.getNamedItem(`aria-checked`)?.value===`true`),m(O.onClick)&&O.onClick(e)},B=b||F;return v(y.Item,{...O.id===void 0?{}:{id:O.id},ref:M,"aria-label":j,className:n(`${e}-${s}`,`${e}-${s}--${R}`,I?`${e}-${s}--grouped`:``,`flex h-6 max-h-6 max-w-full items-center justify-center gap-2 text-left outline-none transition-colors duration-300 ease-out active:transition-none`,I?``:`rounded-full`,B?`${e}-${s}--disabled cursor-not-allowed ${P[R]} ${a[R]}`:`cursor-pointer ${N[R]} ${o[R]}`,x&&!C?`${e}-${s}--full-width w-full`:I&&L===`vertical`?`w-full`:`w-fit`,p(S)?``:`${e}-${s}--addendum ${e}-${s}--addendum--prefix`,C?`${e}-${s}--icon-only w-6 p-1`:`px-3 py-1`,O.className),disabled:B,title:j,value:D,onClick:z,...g([`className`,`id`,`onClick`],O),children:[S,!C&&_(r,{className:t(`fractal-toggle-group__label`,`max-h-full max-w-full flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-center align-middle`,B?`fractal-toggle-group__label--disabled cursor-not-allowed`:`cursor-pointer`),element:T||(h(A?l:w)?`label`:`div`),children:A?l:w})]})});b.displayName=`ToggleGroupItem`;export{b as ToggleGroupItem,b as default};
//# sourceMappingURL=ToggleGroupItem.js.map