UNPKG

@snowball-tech/fractal

Version:

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

2 lines 2.02 kB
"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{DEFAULT_VARIANT as a,GROUP_NAME as o,disabledVariantClassNames as s,variantClassNames as c}from"./Toggle.constants.js";import{forwardRef as l,useImperativeHandle as u,useRef as d}from"react";import f from"lodash/fp/isEmpty.js";import p from"lodash/fp/isFunction.js";import m from"lodash/fp/isString.js";import h from"lodash/fp/omit.js";import{jsx as g,jsxs as _}from"react/jsx-runtime";import*as v from"@radix-ui/react-toggle";const y=l(({children:l,defaultToggled:y,disabled:b=!1,fullWidth:x=!1,icon:S,iconOnly:C=!1,label:w,labelElement:T,onToggle:E,toggled:D,variant:O=a,...k},A)=>{let j=!!l;!j&&!w&&console.warn("You must provide a `label` or `children` to the `Toggle` component");let M=d(null);u(A,()=>M.current);let N=e=>{M?.current?.blur(),p(E)&&E(e)},P=m(w)?w:f(w)?i(l):i(w);return _(v.Root,{...k.id===void 0?{}:{id:k.id},ref:M,"aria-label":P,className:n(`${e}-${o}`,`${e}-${o}--${O}`,`flex h-6 max-h-6 max-w-full items-center justify-center gap-2 rounded-full text-left outline-none transition-colors duration-300 ease-out active:transition-none`,b?`${e}-${o}--disabled cursor-not-allowed ${s[O]}`:`cursor-pointer ${c[O]}`,x&&!C?`${e}-${o}--full-width w-full`:`w-fit`,f(S)?``:`${e}-${o}--addendum ${e}-${o}--addendum--prefix`,C?`${e}-${o}--icon-only w-6 p-1`:`px-3 py-1`,k.className),...y===void 0?{}:{defaultPressed:y},disabled:b,title:P,...D===void 0?{}:{pressed:D},onPressedChange:N,...h([`className`,`id`],k),children:[S,!C&&g(r,{className:t(`fractal-toggle__label`,`max-h-full max-w-full flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-center align-middle`,b?`fractal-toggle__label--disabled cursor-not-allowed`:`cursor-pointer`),element:T||(m(j?l:w)?`label`:`div`),children:j?l:w})]})});y.displayName=`Toggle`;export{y as Toggle,y as default}; //# sourceMappingURL=Toggle.js.map