@veracity/vui 3.0.0-beta.4 → 3.0.0-beta.6

package/dist/chat/chatInput.js

@@ -0,0 +1,24 @@
+import{cs as e}from"../utils/styles.js";import{inputColors as t}from"../input/consts.js";import{useStyleConfig as n}from"../core/theme.js";import{styled as r}from"../core/styled.js";import{vui as i}from"../core/vui.js";import a from"../box/box.js";import o from"../icon/icon.js";import s from"../button/button.js";import c from"../input/helpText.js";import l from"./chatInputButton.js";import{useEffect as u,useState as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=r.textareaBox`
+  border-radius: none;
+  border-width: 0;
+  outline: none;
+  padding: 0 8px;
+  resize: none;
+  transition-duration: 0;
+  width: 100%;
+  min-height: 1.5em;
+  overflow-y: hidden;
+
+  &::placeholder {
+    padding-top: 8px;
+  }
+
+  /* Disabled state styles */
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: sandstone.79;
+    border-color: sandstone.79;
+  }
+`,h=i((r,i)=>{let{helpText:h,placeholder:g=`Type your message`,status:_=`default`,maxTextareaHeight:v=120,processingMessage:y=`Generating message`,onNewTopicClick:b,onSend:x,onStop:S,...C}=r,[w,T]=d(``),E=n(`Chat`,r);u(()=>{_===`default`&&T(``)},[_]);let D=e=>{e.key===`Enter`&&e.ctrlKey&&(e.stopPropagation(),w?.length&&_===`default`&&x?.(w)),e.key===`Escape`&&(e.stopPropagation(),_===`processing`&&S?.())},O=e=>{let t=e.target;t.placeholder=``,t.scrollHeight<=v&&(t.style.height=`auto`,t.style.maxHeight=`auto`,t.style.height=`${t.scrollHeight}px`,t.style.maxHeight=`${t.scrollHeight}px`,t.style.lineHeight=`2.2`),_===`default`&&T(t.value)},k=_===`disabled`;return p(a,{className:e(`vui-chat-input`),justifyContent:`space-between`,ref:i,...E?.input,...C,children:[!!b&&_===`default`&&f(s,{animation:`fadeUp`,icon:`uiPlus`,mr:1,onClick:()=>b?.()}),_===`processing`?p(a,{borderColor:t.border,borderWidth:1,center:!0,justifyContent:`flex-start`,py:.5,w:`100%`,children:[f(o,{mx:1,name:`uiSpinnerThird`,pathFill:[`blue.40`,`blue.60`],size:`lg`,variant:`spinning`}),f(a,{children:y})]}):p(a,{animation:`fadeUp`,border:`0`,column:!0,outline:`none`,w:`100%`,children:[p(a,{borderColor:t.border,borderWidth:1,center:!0,focusWithinRingColor:t.focus,justifyContent:`flex-start`,position:`relative`,w:`100%`,children:[f(m,{disabled:k,onChange:O,onFocus:O,onKeyDown:D,placeholder:g,value:w}),f(l,{disabled:!w?.length,h:`100%`,onSend:()=>{w?.length&&x?.(w)},onStop:S,status:_})]}),!!h&&f(c,{children:h})]})]})});h.displayName=`ChatInput`;var g=h;export{h as ChatInput,g as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=chatInput.js.map

package/dist/chat/chatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatInput.js","names":["Box","Button","Icon","ChatInputButton","HelpText"],"sources":["../../src/chat/chatInput.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { useEffect, useState } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { inputColors } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport { cs } from '../utils'\nimport type { ChatInputProps } from './chat.types'\nimport type { ChatInputStatus } from './chat.types'\nimport ChatInputButton from './chatInputButton'\n\nconst CustomTextarea = styled.textareaBox`\n  border-radius: none;\n  border-width: 0;\n  outline: none;\n  padding: 0 8px;\n  resize: none;\n  transition-duration: 0;\n  width: 100%;\n  min-height: 1.5em;\n  overflow-y: hidden;\n\n  &::placeholder {\n    padding-top: 8px;\n  }\n\n  /* Disabled state styles */\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: sandstone.79;\n    border-color: sandstone.79;\n  }\n`\n/**\n * Displays a chat input interface.\n */\nexport const ChatInput = vui<'input', ChatInputProps>((props, ref) => {\n  const {\n    helpText,\n    placeholder = 'Type your message',\n    status = 'default',\n    maxTextareaHeight = 120,\n    processingMessage = 'Generating message',\n    onNewTopicClick,\n    onSend,\n    onStop,\n    ...rest\n  } = props\n\n  const [value, setValue] = useState<string>('')\n  const styles = useStyleConfig('Chat', props)\n\n  useEffect(() => {\n    if (status === 'default') setValue('')\n  }, [status])\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && e.ctrlKey) {\n      e.stopPropagation()\n      if (value?.length && status === 'default') onSend?.(value)\n    }\n\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      if (status === 'processing') onStop?.()\n    }\n  }\n\n  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const textarea = e.target\n    textarea.placeholder = ''\n\n    // Dynamically adjust the height of the textarea\n\n    if (textarea.scrollHeight <= maxTextareaHeight) {\n      textarea.style.height = 'auto'\n      textarea.style.maxHeight = 'auto'\n      textarea.style.height = `${textarea.scrollHeight}px`\n      textarea.style.maxHeight = `${textarea.scrollHeight}px`\n      textarea.style.lineHeight = '2.2'\n    }\n\n    if (status === 'default') setValue(textarea.value)\n  }\n\n  const isDisabled = status === 'disabled'\n\n  return (\n    <Box className={cs('vui-chat-input')} justifyContent=\"space-between\" ref={ref} {...styles?.input} {...rest}>\n      {!!onNewTopicClick && status === 'default' && (\n        <Button animation=\"fadeUp\" icon=\"uiPlus\" mr={1} onClick={() => onNewTopicClick?.()} />\n      )}\n      {status === 'processing' ? (\n        <Box borderColor={inputColors.border} borderWidth={1} center justifyContent=\"flex-start\" py={0.5} w=\"100%\">\n          <Icon mx={1} name=\"uiSpinnerThird\" pathFill={['blue.40', 'blue.60']} size=\"lg\" variant=\"spinning\" />\n          <Box>{processingMessage}</Box>\n        </Box>\n      ) : (\n        <Box animation=\"fadeUp\" border=\"0\" column outline=\"none\" w=\"100%\">\n          <Box\n            borderColor={inputColors.border}\n            borderWidth={1}\n            center\n            focusWithinRingColor={inputColors.focus}\n            justifyContent=\"flex-start\"\n            position=\"relative\"\n            w=\"100%\"\n          >\n            <CustomTextarea\n              disabled={isDisabled}\n              onChange={handleTextareaChange}\n              onFocus={handleTextareaChange}\n              onKeyDown={onKeyDown as any}\n              placeholder={placeholder}\n              value={value}\n            />\n            <ChatInputButton\n              disabled={!value?.length}\n              h=\"100%\"\n              onSend={() => {\n                if (value?.length) onSend?.(value)\n              }}\n              onStop={onStop}\n              status={status as ChatInputStatus}\n            />\n          </Box>\n          {!!helpText && <HelpText>{helpText}</HelpText>}\n        </Box>\n      )}\n    </Box>\n  )\n})\n\nChatInput.displayName = 'ChatInput'\nexport default ChatInput\n"],"mappings":"oeAcA,MAAM,EAAiB,EAAO,WAAW;;;;;;;;;;;;;;;;;;;;;;EA0B5B,EAAY,GAA8B,EAAO,IAAQ,CACpE,GAAM,CACJ,WACA,cAAc,oBACd,SAAS,UACT,oBAAoB,IACpB,oBAAoB,qBACpB,kBACA,SACA,SACA,GAAG,GACD,EAEE,CAAC,EAAO,GAAY,EAAiB,GAAG,CACxC,EAAS,EAAe,OAAQ,EAAM,CAE5C,MAAgB,CACV,IAAW,WAAW,EAAS,GAAG,EACrC,CAAC,EAAO,CAAC,CAEZ,IAAM,EAAa,GAAuC,CACpD,EAAE,MAAQ,SAAW,EAAE,UACzB,EAAE,iBAAiB,CACf,GAAO,QAAU,IAAW,WAAW,IAAS,EAAM,EAGxD,EAAE,MAAQ,WACZ,EAAE,iBAAiB,CACf,IAAW,cAAc,KAAU,GAIrC,EAAwB,GAA8C,CAC1E,IAAM,EAAW,EAAE,OACnB,EAAS,YAAc,GAInB,EAAS,cAAgB,IAC3B,EAAS,MAAM,OAAS,OACxB,EAAS,MAAM,UAAY,OAC3B,EAAS,MAAM,OAAS,GAAG,EAAS,aAAa,IACjD,EAAS,MAAM,UAAY,GAAG,EAAS,aAAa,IACpD,EAAS,MAAM,WAAa,OAG1B,IAAW,WAAW,EAAS,EAAS,MAAM,EAG9C,EAAa,IAAW,WAE9B,OACE,EAACA,EAAAA,CAAI,UAAW,EAAG,iBAAiB,CAAE,eAAe,gBAAqB,MAAK,GAAI,GAAQ,MAAO,GAAI,YACnG,CAAC,CAAC,GAAmB,IAAW,WAC/B,EAACC,EAAAA,CAAO,UAAU,SAAS,KAAK,SAAS,GAAI,EAAG,YAAe,KAAmB,EAAI,CAEvF,IAAW,aACV,EAACD,EAAAA,CAAI,YAAa,EAAY,OAAQ,YAAa,EAAG,OAAA,GAAO,eAAe,aAAa,GAAI,GAAK,EAAE,iBAClG,EAACE,EAAAA,CAAK,GAAI,EAAG,KAAK,iBAAiB,SAAU,CAAC,UAAW,UAAU,CAAE,KAAK,KAAK,QAAQ,YAAa,CACpG,EAACF,EAAAA,CAAAA,SAAK,EAAA,CAAwB,CAAA,EAC1B,CAEN,EAACA,EAAAA,CAAI,UAAU,SAAS,OAAO,IAAI,OAAA,GAAO,QAAQ,OAAO,EAAE,iBACzD,EAACA,EAAAA,CACC,YAAa,EAAY,OACzB,YAAa,EACb,OAAA,GACA,qBAAsB,EAAY,MAClC,eAAe,aACf,SAAS,WACT,EAAE,iBAEF,EAAC,EAAA,CACC,SAAU,EACV,SAAU,EACV,QAAS,EACE,YACE,cACN,SACP,CACF,EAACG,EAAAA,CACC,SAAU,CAAC,GAAO,OAClB,EAAE,OACF,WAAc,CACR,GAAO,QAAQ,IAAS,EAAM,EAE5B,SACA,UACR,CAAA,EACE,CACL,CAAC,CAAC,GAAY,EAACC,EAAAA,CAAAA,SAAU,EAAA,CAAoB,CAAA,EAC1C,CAAA,EAEJ,EAER,CAEF,EAAU,YAAc,YACxB,IAAA,EAAe"}

package/dist/chat/chatInputButton.js

@@ -0,0 +1,2 @@
+import{useStyleConfig as e}from"../core/theme.js";import{vui as t}from"../core/vui.js";import{Button as n}from"../button/button.js";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let a=e(`Chat`,t),{status:o=`default`,onSend:s,onStop:c}=t;return r(n,{disabled:o===`disabled`||o===`processing`&&!c,h:`100%`,icon:o===`processing`&&c?`falStopCircle`:`falChevronCircleRight`,ml:1,onClick:()=>o===`processing`?c?.():s?.(),ref:i,variant:`tertiaryDark`,...a?.inputButton})});i.displayName=`ChatInputButton`;var a=i;export{a as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=chatInputButton.js.map

package/dist/chat/chatInputButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatInputButton.js","names":[],"sources":["../../src/chat/chatInputButton.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport type { ChatInputButtonProps } from './chat.types'\n\n/**\n *  Displays a chat input button.\n */\nexport const ChatInputButton = vui<'button', ChatInputButtonProps>((props, ref) => {\n  const styles = useStyleConfig('Chat', props)\n\n  const { status = 'default', onSend, onStop } = props\n\n  const icon = status === 'processing' && onStop ? 'falStopCircle' : 'falChevronCircleRight'\n\n  return (\n    <Button\n      disabled={status === 'disabled' || (status === 'processing' && !onStop)}\n      h=\"100%\"\n      icon={icon}\n      ml={1}\n      onClick={() => (status === 'processing' ? onStop?.() : onSend?.())}\n      ref={ref}\n      variant=\"tertiaryDark\"\n      {...styles?.inputButton}\n    />\n  )\n})\n\nChatInputButton.displayName = 'ChatInputButton'\nexport default ChatInputButton\n"],"mappings":"4KAOA,MAAa,EAAkB,GAAqC,EAAO,IAAQ,CACjF,IAAM,EAAS,EAAe,OAAQ,EAAM,CAEtC,CAAE,SAAS,UAAW,SAAQ,UAAW,EAI/C,OACE,EAAC,EAAA,CACC,SAAU,IAAW,YAAe,IAAW,cAAgB,CAAC,EAChE,EAAE,OACF,KANS,IAAW,cAAgB,EAAS,gBAAkB,wBAO/D,GAAI,EACJ,YAAgB,IAAW,aAAe,KAAU,CAAG,KAAU,CAC5D,MACL,QAAQ,eACR,GAAI,GAAQ,aACZ,EAEJ,CAEF,EAAgB,YAAc,kBAC9B,IAAA,EAAe"}

package/dist/chat/chatMessage.d.ts

@@ -0,0 +1,11 @@
+import { VuiComponent } from "../core/vui.js";
+import { MessageProps } from "../message/message.types.js";
+
+//#region src/chat/chatMessage.d.ts
+/**
+ * Displays a chat interface with messages and actions.
+ */
+declare const ChatMessage: VuiComponent<"div", MessageProps>;
+//#endregion
+export { ChatMessage };
+//# sourceMappingURL=chatMessage.d.ts.map

package/dist/chat/chatMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessage.d.ts","names":[],"sources":["../../src/chat/chatMessage.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAca,cAAA,WAeX,cAAA,CAAA,KAAA,EAfsB,YAetB,CAAA"}

package/dist/chat/chatMessage.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{vui as n}from"../core/vui.js";import r from"../message/message.js";import{jsx as i}from"react/jsx-runtime";const a={variant:`solidDarkBlue`,icon:`brandVeracity`},o=n((n,o)=>{let s=t(`Chat`,n),{avatar:c=a,...l}=n;return i(r,{avatar:c,className:e(`vui-chat-message`),h:`100%`,my:`16px`,ref:o,...s?.message,...l})});o.displayName=`ChatMessage`;var s=o;export{o as ChatMessage,s as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=chatMessage.js.map

package/dist/chat/chatMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatMessage.js","names":["defaultAvatar: AvatarProps","Message"],"sources":["../../src/chat/chatMessage.tsx"],"sourcesContent":["import type { AvatarProps } from '../avatar'\nimport { useStyleConfig, vui } from '../core'\nimport type { MessageProps } from '../message'\nimport Message from '../message'\nimport { cs } from '../utils'\n\nconst defaultAvatar: AvatarProps = {\n  variant: 'solidDarkBlue',\n  icon: 'brandVeracity',\n}\n\n/**\n * Displays a chat interface with messages and actions.\n */\nexport const ChatMessage = vui<'div', MessageProps>((props, ref) => {\n  const styles = useStyleConfig('Chat', props)\n  const { avatar = defaultAvatar, ...rest } = props\n\n  return (\n    <Message\n      avatar={avatar}\n      className={cs('vui-chat-message')}\n      h=\"100%\"\n      my=\"16px\"\n      ref={ref}\n      {...styles?.message}\n      {...rest}\n    />\n  )\n})\n\nChatMessage.displayName = 'ChatMessage'\nexport default ChatMessage\n"],"mappings":"4MAMA,MAAMA,EAA6B,CACjC,QAAS,gBACT,KAAM,gBACP,CAKY,EAAc,GAA0B,EAAO,IAAQ,CAClE,IAAM,EAAS,EAAe,OAAQ,EAAM,CACtC,CAAE,SAAS,EAAe,GAAG,GAAS,EAE5C,OACE,EAACC,EAAAA,CACS,SACR,UAAW,EAAG,mBAAmB,CACjC,EAAE,OACF,GAAG,OACE,MACL,GAAI,GAAQ,QACZ,GAAI,GACJ,EAEJ,CAEF,EAAY,YAAc,cAC1B,IAAA,EAAe"}

package/dist/chat/theme.js

@@ -0,0 +1,2 @@
+var e={baseStyle:{chat:{flexDirection:`column`,w:`100%`,height:`100%`},messages:{flexDirection:`column`,overflowY:`auto`,position:`relative`,w:`100%`},suggestions:{display:`block`,textAlign:`right`,width:`100%`}},defaultProps:{},sizes:{},variants:{}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/chat/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/chat/theme.ts"],"sourcesContent":["const baseStyle = {\n  chat: { flexDirection: 'column', w: '100%', height: '100%' },\n  messages: { flexDirection: 'column', overflowY: 'auto', position: 'relative', w: '100%' },\n  suggestions: { display: 'block', textAlign: 'right', width: '100%' },\n}\n\nconst defaultProps = {}\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  sizes,\n  variants,\n}\n"],"mappings":"AAYA,IAAA,EAAe,CACb,UAbgB,CAChB,KAAM,CAAE,cAAe,SAAU,EAAG,OAAQ,OAAQ,OAAQ,CAC5D,SAAU,CAAE,cAAe,SAAU,UAAW,OAAQ,SAAU,WAAY,EAAG,OAAQ,CACzF,YAAa,CAAE,QAAS,QAAS,UAAW,QAAS,MAAO,OAAQ,CACrE,CAUC,aARmB,EAAE,CASrB,MAPY,EAAE,CAQd,SANe,EAAE,CAOlB"}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,30 @@
+import { AnimationProps } from "../system/animations.js";
+import { BackgroundColorProps } from "../system/backgrounds.js";
+import { BorderBottomColorProps, BorderBottomProps, BorderBottomWidthProps, BorderColorProps, BorderLeftColorProps, BorderLeftProps, BorderLeftWidthProps, BorderProps, BorderRadiusProps, BorderRightColorProps, BorderRightProps, BorderRightWidthProps, BorderStyleProps, BorderTopColorProps, BorderTopProps, BorderTopWidthProps, BorderWidthProps, DivideColorProps, DivideStyleProps, DivideXProps, DivideXReverseProps, DivideYProps, DivideYReverseProps, OutlineColorProps, OutlineProps, OutlineStyleProps, OutlineWidthProps, RingColorProps, RingProps } from "../system/borders.js";
+import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from "../system/custom.js";
+import { BoxShadowProps, OpacityProps, TextShadowProps } from "../system/effects.js";
+import { BottomProps, BoxSizingProps, DisplayProps, FloatProps, LeftProps, ObjectFitProps, OverflowProps, OverflowXProps, OverflowYProps, OverscrollBehaviorProps, PositionProps, RightProps, TopProps, VisibilityProps, ZIndexProps } from "../system/layout.js";
+import { AlignContentProps, AlignItemsProps, AlignSelfProps, FlexBasisProps, FlexDirectionProps, FlexGrowProps, FlexProps, FlexShrinkProps, FlexWrapProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, OrderProps } from "../system/flexboxes.js";
+import { AppearanceProps, CursorProps, PointerEventsProps, ResizeProps, UserSelectProps } from "../system/interactivity.js";
+import { HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, WidthProps } from "../system/sizing.js";
+import { MarginBottomProps, MarginLeftProps, MarginProps, MarginRightProps, MarginTopProps, MarginXProps, MarginYProps, PaddingBottomProps, PaddingLeftProps, PaddingProps, PaddingRightProps, PaddingTopProps, PaddingXProps, PaddingYProps, SpaceXProps, SpaceXReverseProps, SpaceYProps, SpaceYReverseProps } from "../system/space.js";
+import { ColProps, RowProps } from "../system/flexboxGrids.js";
+import { ColumnGapProps, GapProps, GridAreaProps, GridAutoColumnsProps, GridAutoFlowProps, GridAutoRowsProps, GridColumnProps, GridRowProps, GridTemplateAreasProps, GridTemplateColumnsProps, GridTemplateRowsProps, RowGapProps } from "../system/grids.js";
+import { BorderCollapseProps, TableLayoutProps } from "../system/tables.js";
+import { RotateProps, ScaleProps, ScaleXProps, ScaleYProps, SkewXProps, SkewYProps, TransformOriginProps, TransformProps, TranslateXProps, TranslateYProps } from "../system/transforms.js";
+import { TransitionDelayProps, TransitionDurationProps, TransitionPropertyProps, TransitionProps, TransitionTimingFunctionProps } from "../system/transitions.js";
+import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightProps, LetterSpacingProps, LineHeightProps, ListStylePositionProps, ListStyleTypeProps, TextAlignProps, TextDecorationProps, TextOverflowProps, TextTransformProps, VerticalAlignProps, WhiteSpaceProps } from "../system/typography.js";
+import { VuiComponent } from "../core/vui.js";
+import { CheckboxProps, CheckboxStyleProps } from "./checkbox.types.js";
+import * as styled_components365 from "styled-components";
+
+//#region src/checkbox/checkbox.d.ts
+declare const CheckboxBase: styled_components365.StyledComponent<"label", styled_components365.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & CheckboxStyleProps, never>;
+/**
+ * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.
+ * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
+ */
+declare const Checkbox: VuiComponent<"span", CheckboxProps>;
+//#endregion
+export { Checkbox, CheckboxBase };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;cAgCa,cAAY,oBAAA,CAAA,yBAqBxB,oBAAA,CArBwB,YAAA,k+EAAA;;;;;cA2BZ,+BAAQ"}

package/dist/checkbox/checkbox.js

@@ -0,0 +1,40 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{checkboxColors as n,disabled as r}from"./consts.js";import{omitThemingProps as i,th as a,useStyleConfig as o}from"../core/theme.js";import{styled as s}from"../core/styled.js";import{vui as c}from"../core/vui.js";import l from"../icon/icon.js";import u from"../t/t.js";import{useCheckboxGroupContext as d}from"./context.js";import{useEffect as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";const g=s.spanBox`
+  border-radius: none;
+  display: inline-flex;
+  flex-shrink: 0;
+  position: relative;
+  transition-duration: fast;
+`,_=s.input`
+  cursor: inherit;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+`,v=s.labelBox`
+  cursor: pointer;
+  display: inline-flex;
+  width: fit-content;
+
+  &:not([aria-disabled='true']):hover .vui-checkboxControl {
+    color: ${e=>a.color(e.controlHoverColor)};
+  }
+
+  .vui-checkboxControl:focus-within {
+    color: ${n.focus};
+  }
+
+  &[aria-disabled='true'] {
+    color: ${r.text};
+    cursor: not-allowed;
+
+    .vui-checkboxControl {
+      color: ${r.icon};
+    }
+  }
+`,y=c((r,a)=>{let{defaultValue:s,...c}=d()??{},y={...c,...r},{checked:b,children:x,className:S,defaultChecked:C=s===void 0?void 0:s.includes(r.value),disabled:w,icon:T=`uiCheckboxUnselected`,iconChecked:E=`uiCheckboxSelected`,iconIndeterminate:D=`uiCheckboxIndeterminate`,id:O,inputProps:k,inputRef:A,isIndeterminate:j,label:M,name:N,onChange:P,required:F,value:I,...L}=i(y),[R,z]=p(C),B=o(`Checkbox`,y),{color:V,hoverColor:H,...U}=B.control,W=j?D:R?E:T,G=x||M?1:0,K=R||j?n.checked:V,q=H||n.hover,J=M&&M?.length>=60;f(()=>{b!==void 0&&z(b)},[b]);let Y=e=>{b===void 0&&z(e.target.checked),P?.(e)},X=e({"aria-disabled":w});return h(v,{alignItems:J?`flex-start`:`center`,className:t(`vui-checkbox`,S),controlHoverColor:q,ref:a,...B.container,...X,...L,children:[h(g,{bg:`white`,className:`vui-checkboxControl`,color:K,focusWithinRing:3,mr:G,role:`none`,...U,children:[m(_,{className:`vui-checkboxInput`,onChange:Y,ref:A,type:`checkbox`,checked:b,defaultChecked:C,disabled:w,id:O,name:N,required:F,value:I,...k}),m(l,{className:`vui-checkboxIcon`,h:`100%`,name:W,w:`100%`})]}),x??(M&&m(u,{className:`vui-checkboxLabel`,lineHeight:J?`26px`:`normal`,...B.label,children:M}))]})});y.displayName=`Checkbox`;export{y as Checkbox,v as CheckboxBase};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["disabled","Icon","T"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport T from '../t'\nimport type { ChangeEvent } from '../utils'\nimport { cs, filterUndefined } from '../utils'\nimport type { CheckboxProps, CheckboxStyleProps } from './checkbox.types'\nimport { checkboxColors, disabled } from './consts'\nimport { useCheckboxGroupContext } from './context'\n\nconst CheckboxControl = styled.spanBox`\n  border-radius: none;\n  display: inline-flex;\n  flex-shrink: 0;\n  position: relative;\n  transition-duration: fast;\n`\n\nconst CheckboxInput = styled.input`\n  cursor: inherit;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n`\n\nexport const CheckboxBase = styled.labelBox<CheckboxStyleProps>`\n  cursor: pointer;\n  display: inline-flex;\n  width: fit-content;\n\n  &:not([aria-disabled='true']):hover .vui-checkboxControl {\n    color: ${p => th.color(p.controlHoverColor)};\n  }\n\n  .vui-checkboxControl:focus-within {\n    color: ${checkboxColors.focus};\n  }\n\n  &[aria-disabled='true'] {\n    color: ${disabled.text};\n    cursor: not-allowed;\n\n    .vui-checkboxControl {\n      color: ${disabled.icon};\n    }\n  }\n`\n\n/**\n * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.\n * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.\n */\nexport const Checkbox = vui<'span', CheckboxProps>((props, ref) => {\n  const { defaultValue: groupDefaultValue, ...checkboxGroupProps } = useCheckboxGroupContext() ?? {}\n\n  const mergedProps = { ...checkboxGroupProps, ...props }\n  const {\n    checked,\n    children,\n    className,\n    defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined,\n    disabled,\n    icon: iconProp = 'uiCheckboxUnselected',\n    iconChecked = 'uiCheckboxSelected',\n    iconIndeterminate = 'uiCheckboxIndeterminate',\n    id,\n    inputProps,\n    inputRef,\n    isIndeterminate,\n    label,\n    name,\n    onChange: onChangeProp,\n    required,\n    value,\n    ...rest\n  } = omitThemingProps(mergedProps)\n  const [isChecked, setIsChecked] = useState(defaultChecked)\n  const styles = useStyleConfig('Checkbox', mergedProps)\n  const { color: controlColor, hoverColor, ...controlStyles } = styles.control\n\n  const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp\n  const controlMr = children || label ? 1 : 0\n  const color = isChecked || isIndeterminate ? checkboxColors.checked : controlColor\n  const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover\n  const isLongLabel = label && label?.length >= 60\n\n  useEffect(() => {\n    checked !== undefined && setIsChecked(checked)\n  }, [checked])\n\n  const onChange = (e: ChangeEvent) => {\n    if (checked === undefined) setIsChecked(e.target.checked)\n    onChangeProp?.(e)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n\n  return (\n    <CheckboxBase\n      alignItems={isLongLabel ? 'flex-start' : 'center'}\n      className={cs('vui-checkbox', className)}\n      controlHoverColor={controlHoverColor}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <CheckboxControl\n        bg=\"white\"\n        className=\"vui-checkboxControl\"\n        color={color}\n        focusWithinRing={3}\n        mr={controlMr}\n        role=\"none\"\n        {...controlStyles}\n      >\n        <CheckboxInput\n          className=\"vui-checkboxInput\"\n          onChange={onChange}\n          ref={inputRef}\n          type=\"checkbox\"\n          {...{ checked, defaultChecked, disabled, id, name, required, value }}\n          {...inputProps}\n        />\n        <Icon className=\"vui-checkboxIcon\" h=\"100%\" name={icon} w=\"100%\" />\n      </CheckboxControl>\n\n      {children ??\n        (label && (\n          <T className=\"vui-checkboxLabel\" lineHeight={isLongLabel ? '26px' : 'normal'} {...styles.label}>\n            {label}\n          </T>\n        ))}\n    </CheckboxBase>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\nexport default Checkbox\n"],"mappings":"ygBAWA,MAAM,EAAkB,EAAO,OAAO;;;;;;EAQhC,EAAgB,EAAO,KAAK;;;;;;;;;;;EAarB,EAAe,EAAO,QAA4B;;;;;;aAMlD,GAAK,EAAG,MAAM,EAAE,kBAAkB,CAAC;;;;aAInC,EAAe,MAAM;;;;aAIrB,EAAS,KAAK;;;;eAIZ,EAAS,KAAK;;;EAShB,EAAW,GAA4B,EAAO,IAAQ,CACjE,GAAM,CAAE,aAAc,EAAmB,GAAG,GAAuB,GAAyB,EAAI,EAAE,CAE5F,EAAc,CAAE,GAAG,EAAoB,GAAG,EAAO,CACjD,CACJ,UACA,WACA,YACA,iBAAiB,IAAsB,IAAA,GAAsD,IAAA,GAA1C,EAAkB,SAAS,EAAM,MAAM,CAC1F,SAAA,EACA,KAAM,EAAW,uBACjB,cAAc,qBACd,oBAAoB,0BACpB,KACA,aACA,WACA,kBACA,QACA,OACA,SAAU,EACV,WACA,QACA,GAAG,GACD,EAAiB,EAAY,CAC3B,CAAC,EAAW,GAAgB,EAAS,EAAe,CACpD,EAAS,EAAe,WAAY,EAAY,CAChD,CAAE,MAAO,EAAc,aAAY,GAAG,GAAkB,EAAO,QAE/D,EAAO,EAAkB,EAAoB,EAAY,EAAc,EACvE,EAAY,GAAY,EAAQ,EAAI,EACpC,EAAQ,GAAa,EAAkB,EAAe,QAAU,EAChE,EAAoB,GAA0B,EAAe,MAC7D,EAAc,GAAS,GAAO,QAAU,GAE9C,MAAgB,CACd,IAAY,IAAA,IAAa,EAAa,EAAQ,EAC7C,CAAC,EAAQ,CAAC,CAEb,IAAM,EAAY,GAAmB,CAC/B,IAAY,IAAA,IAAW,EAAa,EAAE,OAAO,QAAQ,CACzD,IAAe,EAAE,EAGb,EAAe,EAAgB,CACnC,gBAAiBA,EAClB,CAAC,CAEF,OACE,EAAC,EAAA,CACC,WAAY,EAAc,aAAe,SACzC,UAAW,EAAG,eAAgB,EAAU,CACrB,oBACd,MACL,GAAI,EAAO,UACX,GAAI,EACJ,GAAI,YAEJ,EAAC,EAAA,CACC,GAAG,QACH,UAAU,sBACH,QACP,gBAAiB,EACjB,GAAI,EACJ,KAAK,OACL,GAAI,YAEJ,EAAC,EAAA,CACC,UAAU,oBACA,WACV,IAAK,EACL,KAAK,WACC,UAAS,iBAAgB,SAAA,EAAU,KAAI,OAAM,WAAU,QAC7D,GAAI,GACJ,CACF,EAACC,EAAAA,CAAK,UAAU,mBAAmB,EAAE,OAAO,KAAM,EAAM,EAAE,QAAS,CAAA,EACnD,CAEjB,IACE,GACC,EAACC,EAAAA,CAAE,UAAU,oBAAoB,WAAY,EAAc,OAAS,SAAU,GAAI,EAAO,eACtF,GACC,EAAA,EAEK,EAEjB,CAEF,EAAS,YAAc"}

package/dist/checkbox/checkbox.types.d.ts

@@ -0,0 +1,48 @@
+import { ChangeEventHandler, FocusEventHandler } from "../utils/types.js";
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp } from "../icon/icon.types.js";
+import { HTMLAttributes } from "react";
+
+//#region src/checkbox/checkbox.types.d.ts
+type CheckboxProps = SystemProps & ThemingProps<'Checkbox'> & {
+  /** Provides value to checkbox in controlled mode. */
+  checked?: boolean;
+  /** Deprecated. Please use variant instead. @deprecated  */
+  colorScheme?: 'blue' | 'prussian';
+  /** Disables checkbox and related elements with the right styling. */
+  disabled?: boolean;
+  /** Icon used when not checked. @default cuiCheckboxUnselected */
+  icon?: IconProp;
+  /** Icon used when checked. @default cuiCheckboxSelected */
+  iconChecked?: IconProp;
+  /** Icon used when in indeterminte state. @default cuiCheckboxIndeterminate */
+  iconIndeterminate?: IconProp;
+  /** Props object passed to the inner input element. */
+  inputProps?: HTMLAttributes<HTMLInputElement>;
+  /** Ref passed to the inner input element. */
+  inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+  /** Displays the checkbox as indeterminate. */
+  isIndeterminate?: boolean;
+  /** Socket for the text next to the checkbox. */
+  label?: string;
+  /** Passed to the inner input. */
+  name?: string;
+  /** Passed to the inner input. */
+  onBlur?: FocusEventHandler;
+  /** Passed to the inner input. */
+  onChange?: ChangeEventHandler;
+  /** Passed to the inner input. */
+  onFocus?: FocusEventHandler;
+  /** Passed to the inner input. */
+  required?: boolean;
+  /** Passed to the inner input. */
+  value?: number | string;
+};
+type CheckboxStyleProps = {
+  /** Styles the icon when any part of the checkbox is hovered. */
+  controlHoverColor: string;
+};
+//#endregion
+export { CheckboxProps, CheckboxStyleProps };
+//# sourceMappingURL=checkbox.types.d.ts.map

package/dist/checkbox/checkbox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.types.d.ts","names":[],"sources":["../../src/checkbox/checkbox.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAOY,aAAA,GAAgB,cAC1B;;EADU,OAAA,CAAA,EAAA,OAAa;EAAA;aAAG,CAAA,EAAA,MAAA,GAAA,UAAA;;UASjB,CAAA,EAAA,OAAA;;MAIa,CAAA,EAJb,QAIa;;aAEP,CAAA,EAJC,QAID;;mBAEI,CAAA,EAJG,QAIH;;YAUN,CAAA,EAZE,cAYF,CAZiB,gBAYjB,CAAA;;EAEgB,QAAA,CAAA,EAZhB,KAAA,CAAM,gBAYU,CAZO,gBAYP,GAAA,IAAA,CAAA,GAAA,IAAA;EAOnB;;;;;;;WAXC;;aAEE;;YAED;;;;;;KAOF,kBAAA"}

package/dist/checkbox/checkboxGroup.d.ts

@@ -0,0 +1,15 @@
+import { SystemProps } from "../system/system.js";
+import { VuiComponent } from "../core/vui.js";
+import { CheckboxGroupProps } from "./checkboxGroup.types.js";
+import * as styled_components363 from "styled-components";
+
+//#region src/checkbox/checkboxGroup.d.ts
+declare const CheckboxGroupBase: styled_components363.StyledComponent<"div", styled_components363.DefaultTheme, SystemProps, never>;
+/**
+ * Organizes layout and display of multiple checkboxes as a row or column.
+ * Exposes some props to the children via context.
+ */
+declare const CheckboxGroup: VuiComponent<"div", CheckboxGroupProps>;
+//#endregion
+export { CheckboxGroup, CheckboxGroupBase };
+//# sourceMappingURL=checkboxGroup.d.ts.map

package/dist/checkbox/checkboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxGroup.d.ts","names":[],"sources":["../../src/checkbox/checkboxGroup.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOa,mBAAiB,oBAAA,CAAA,uBAG7B,oBAAA,CAH6B,YAAA;;;;;AAAjB,cASA,aANZ,cAAA,CAAA,KAAA,EAMyB,kBANzB,CAAA"}

package/dist/checkbox/checkboxGroup.js

@@ -0,0 +1,5 @@
+import{filterUndefined as e}from"../utils/object.js";import{cs as t}from"../utils/styles.js";import{styled as n}from"../core/styled.js";import{vui as r}from"../core/vui.js";import{CheckboxGroupProvider as i}from"./context.js";import{useMemo as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=n.divBox`
+  display: flex;
+  flex-direction: column;
+`,c=r((n,r)=>{let{className:c,defaultValue:l,disabled:u,isRow:d,name:f,onBlur:p,onChange:m,onFocus:h,size:g,variant:_,...v}=n,y=a(()=>e({defaultValue:l,disabled:u,name:f,onBlur:p,onChange:m,onFocus:h,size:g,variant:_}),[l,u,f,p,m,h,g,_]),b=e({flexDirection:d?`row`:void 0});return o(i,{value:y,children:o(s,{className:t(`vui-checkboxGroup`,c),ref:r,...b,...v})})});c.displayName=`CheckboxGroup`;export{c as CheckboxGroup,s as CheckboxGroupBase};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=checkboxGroup.js.map

package/dist/checkbox/checkboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxGroup.js","names":[],"sources":["../../src/checkbox/checkboxGroup.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { styled, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { CheckboxGroupProps } from './checkboxGroup.types'\nimport { CheckboxGroupProvider } from './context'\n\nexport const CheckboxGroupBase = styled.divBox`\n  display: flex;\n  flex-direction: column;\n`\n\n/**\n * Organizes layout and display of multiple checkboxes as a row or column.\n * Exposes some props to the children via context.\n */\nexport const CheckboxGroup = vui<'div', CheckboxGroupProps>((props, ref) => {\n  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, variant, ...rest } = props\n\n  const context = useMemo(\n    () => filterUndefined({ defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant }),\n    [defaultValue, disabled, name, onBlur, onChange, onFocus, size, variant],\n  )\n\n  const aliasedProps = filterUndefined({\n    flexDirection: isRow ? 'row' : undefined,\n  } as const)\n\n  return (\n    <CheckboxGroupProvider value={context}>\n      <CheckboxGroupBase className={cs('vui-checkboxGroup', className)} ref={ref} {...aliasedProps} {...rest} />\n    </CheckboxGroupProvider>\n  )\n})\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n\nexport default CheckboxGroup\n"],"mappings":"0SAOA,MAAa,EAAoB,EAAO,MAAM;;;EASjC,EAAgB,GAAgC,EAAO,IAAQ,CAC1E,GAAM,CAAE,YAAW,eAAc,WAAU,QAAO,OAAM,SAAQ,WAAU,UAAS,OAAM,UAAS,GAAG,GAAS,EAExG,EAAU,MACR,EAAgB,CAAE,eAAc,WAAU,OAAM,SAAQ,WAAU,UAAS,OAAM,UAAS,CAAC,CACjG,CAAC,EAAc,EAAU,EAAM,EAAQ,EAAU,EAAS,EAAM,EAAQ,CACzE,CAEK,EAAe,EAAgB,CACnC,cAAe,EAAQ,MAAQ,IAAA,GAChC,CAAU,CAEX,OACE,EAAC,EAAA,CAAsB,MAAO,WAC5B,EAAC,EAAA,CAAkB,UAAW,EAAG,oBAAqB,EAAU,CAAO,MAAK,GAAI,EAAc,GAAI,GAAQ,EACpF,EAE1B,CAEF,EAAc,YAAc"}

package/dist/checkbox/checkboxGroup.types.d.ts

@@ -0,0 +1,24 @@
+import { ChangeEventHandler, FocusEventHandler } from "../utils/types.js";
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+
+//#region src/checkbox/checkboxGroup.types.d.ts
+type CheckboxGroupProps = SystemProps & ThemingProps<'Checkbox'> & {
+  /** Deprecated. Please use variant instead. @deprecated  */
+  colorScheme?: 'blue' | 'prussian';
+  /** Passes the prop to each checkbox. */
+  disabled?: boolean;
+  /** Displays checkboxes in a row. */
+  isRow?: boolean;
+  /** Passes the prop to each checkbox. */
+  name?: string;
+  /** Passes the prop to each checkbox. */
+  onBlur?: FocusEventHandler;
+  /** Passes the prop to each checkbox. */
+  onChange?: ChangeEventHandler;
+  /** Passes the prop to each checkbox. */
+  onFocus?: FocusEventHandler;
+};
+//#endregion
+export { CheckboxGroupProps };
+//# sourceMappingURL=checkboxGroup.types.d.ts.map

package/dist/checkbox/checkboxGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxGroup.types.d.ts","names":[],"sources":["../../src/checkbox/checkboxGroup.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,kBAAA,GAAqB,cAC/B;;EADU,WAAA,CAAA,EAAA,MAAA,GAAkB,UAAA;EAAA;UAAG,CAAA,EAAA,OAAA;;OAWpB,CAAA,EAAA,OAAA;;MAIC,CAAA,EAAA,MAAA;EAAiB;WAJlB;;aAEE;;YAED"}

package/dist/checkbox/consts.js

@@ -0,0 +1,2 @@
+const e={unchecked:`sandstone.60`,checked:`seaBlue.28`,hover:`seaBlue.20`,focus:`seaBlue.35`},t={icon:`sandstone.79`,text:`sandstone.60`};export{e as checkboxColors,t as disabled};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=consts.js.map

package/dist/checkbox/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/checkbox/consts.ts"],"sourcesContent":["export const checkboxColors = {\n  unchecked: 'sandstone.60',\n  checked: 'seaBlue.28',\n  hover: 'seaBlue.20',\n  focus: 'seaBlue.35',\n} as const\n\nexport const disabled = {\n  icon: 'sandstone.79',\n  text: 'sandstone.60',\n} as const\n"],"mappings":"AAAA,MAAa,EAAiB,CAC5B,UAAW,eACX,QAAS,aACT,MAAO,aACP,MAAO,aACR,CAEY,EAAW,CACtB,KAAM,eACN,KAAM,eACP"}

package/dist/checkbox/context.d.ts

@@ -0,0 +1,8 @@
+import { Dict } from "../utils/types.js";
+import * as react935 from "react";
+
+//#region src/checkbox/context.d.ts
+declare const CheckboxGroupProvider: react935.Provider<Dict>, useCheckboxGroupContext: () => Dict;
+//#endregion
+export { CheckboxGroupProvider, useCheckboxGroupContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/checkbox/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/checkbox/context.ts"],"sourcesContent":[],"mappings":";;;;cAGO,uBAAqB,QAAA,CAAA,SAAA,OAAE,+BAAuB"}

package/dist/checkbox/context.js

@@ -0,0 +1,2 @@
+import{createContext as e}from"../utils/react.js";const[t,n]=e({isOptional:!0});export{t as CheckboxGroupProvider,n as useCheckboxGroupContext};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=context.js.map

package/dist/checkbox/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/checkbox/context.ts"],"sourcesContent":["import type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nconst [CheckboxGroupProvider, useCheckboxGroupContext] = createContext<Dict>({ isOptional: true })\n\nexport { CheckboxGroupProvider, useCheckboxGroupContext }\n"],"mappings":"kDAGA,KAAM,CAAC,EAAuB,GAA2B,EAAoB,CAAE,WAAY,GAAM,CAAC"}

package/dist/checkbox/theme.js

@@ -0,0 +1,2 @@
+import{checkboxColors as e}from"./consts.js";var t={baseStyle:{control:{color:e.unchecked,hoverColor:e.hover},container:{alignItems:`flext-start`}},defaultProps:{size:`md`},parts:[`container`,`control`,`label`],sizes:{sm:{control:{h:16,w:16},label:{size:`sm`}},md:{control:{h:20,w:20},label:{size:`md`}},lg:{control:{h:24,w:24},label:{size:`lg`}}},variants:{}};export{t as default};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=theme.js.map

package/dist/checkbox/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/checkbox/theme.ts"],"sourcesContent":["import { checkboxColors } from './consts'\n\nconst baseStyle = {\n  control: {\n    color: checkboxColors.unchecked,\n    hoverColor: checkboxColors.hover,\n  },\n  container: {\n    alignItems: 'flext-start',\n  },\n}\n\nconst defaultProps = {\n  size: 'md',\n}\n\nconst parts = ['container', 'control', 'label']\n\nconst sizes = {\n  sm: {\n    control: {\n      h: 16,\n      w: 16,\n    },\n    label: {\n      size: 'sm',\n    },\n  },\n  md: {\n    control: {\n      h: 20,\n      w: 20,\n    },\n    label: {\n      size: 'md',\n    },\n  },\n  lg: {\n    control: {\n      h: 24,\n      w: 24,\n    },\n    label: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"6CAkDA,IAAA,EAAe,CACb,UAjDgB,CAChB,QAAS,CACP,MAAO,EAAe,UACtB,WAAY,EAAe,MAC5B,CACD,UAAW,CACT,WAAY,cACb,CACF,CA0CC,aAxCmB,CACnB,KAAM,KACP,CAuCC,MArCY,CAAC,YAAa,UAAW,QAAQ,CAsC7C,MApCY,CACZ,GAAI,CACF,QAAS,CACP,EAAG,GACH,EAAG,GACJ,CACD,MAAO,CACL,KAAM,KACP,CACF,CACD,GAAI,CACF,QAAS,CACP,EAAG,GACH,EAAG,GACJ,CACD,MAAO,CACL,KAAM,KACP,CACF,CACD,GAAI,CACF,QAAS,CACP,EAAG,GACH,EAAG,GACJ,CACD,MAAO,CACL,KAAM,KACP,CACF,CACF,CASC,SAPe,EAAE,CAQlB"}

package/dist/copyToClipboard/copyToClipboard.d.ts

@@ -0,0 +1,17 @@
+import { VuiComponent } from "../core/vui.js";
+import { CopyToClipboardProps } from "./copyToClipboard.types.js";
+
+//#region src/copyToClipboard/copyToClipboard.d.ts
+
+/**
+ * A helper button component.
+ *
+ * Copies the provided text to clipboard.
+ *
+ * Copying is available only for a secure environment (https://), otherwise the button is disabled.
+ *
+ */
+declare const CopyToClipboard: VuiComponent<"button", CopyToClipboardProps>;
+//#endregion
+export { CopyToClipboard };
+//# sourceMappingURL=copyToClipboard.d.ts.map

package/dist/copyToClipboard/copyToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.d.ts","names":[],"sources":["../../src/copyToClipboard/copyToClipboard.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAiBA;;;;;cAAa,wCAAe"}

package/dist/copyToClipboard/copyToClipboard.js

@@ -0,0 +1,2 @@
+import{cs as e}from"../utils/styles.js";import{vui as t}from"../core/vui.js";import n from"../button/button.js";import{useCopyToClipboard as r}from"./useCopyToClipboard.js";import{jsx as i}from"react/jsx-runtime";const a=t((t,a)=>{let{disabled:o,copyText:s,className:c,icon:l=`falCopy`,size:u=`sm`,variant:d=`tertiaryDark`,...f}=t,{copy:p,isCopyDisabled:m}=r(s);return i(n,{"aria-label":`Copy to clipboard ${s}`,className:e(`vui-copy-to-clipboard`,c),disabled:o||m,icon:l,onClick:()=>p(),ref:a,size:u,variant:d,...f})});a.displayName=`CopyToClipboard`;export{a as CopyToClipboard};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=copyToClipboard.js.map

package/dist/copyToClipboard/copyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.js","names":["defaultIcon: IconProp","Button"],"sources":["../../src/copyToClipboard/copyToClipboard.tsx"],"sourcesContent":["import Button from '../button'\nimport { vui } from '../core'\nimport type { IconProp } from '../icon'\nimport { cs } from '../utils'\nimport type { CopyToClipboardProps } from './copyToClipboard.types'\nimport { useCopyToClipboard } from './useCopyToClipboard'\n\nconst defaultIcon: IconProp = 'falCopy'\n\n/**\n * A helper button component.\n *\n * Copies the provided text to clipboard.\n *\n * Copying is available only for a secure environment (https://), otherwise the button is disabled.\n *\n */\nexport const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {\n  const { disabled, copyText, className, icon = defaultIcon, size = 'sm', variant = 'tertiaryDark', ...rest } = props\n\n  const { copy, isCopyDisabled } = useCopyToClipboard(copyText)\n\n  return (\n    <Button\n      aria-label={`Copy to clipboard ${copyText}`}\n      className={cs('vui-copy-to-clipboard', className)}\n      disabled={disabled || isCopyDisabled}\n      icon={icon}\n      onClick={() => copy()}\n      ref={ref}\n      size={size}\n      variant={variant}\n      {...rest}\n    />\n  )\n})\n\nCopyToClipboard.displayName = 'CopyToClipboard'\nexport default CopyToClipboard\n"],"mappings":"qNAOA,MAUa,EAAkB,GAAqC,EAAO,IAAQ,CACjF,GAAM,CAAE,WAAU,WAAU,YAAW,OAAO,UAAa,OAAO,KAAM,UAAU,eAAgB,GAAG,GAAS,EAExG,CAAE,OAAM,kBAAmB,EAAmB,EAAS,CAE7D,OACE,EAACC,EAAAA,CACC,aAAY,qBAAqB,IACjC,UAAW,EAAG,wBAAyB,EAAU,CACjD,SAAU,GAAY,EAChB,OACN,YAAe,GAAM,CAChB,MACC,OACG,UACT,GAAI,GACJ,EAEJ,CAEF,EAAgB,YAAc"}

package/dist/copyToClipboard/copyToClipboard.types.d.ts

@@ -0,0 +1,16 @@
+import { ThemingProps } from "../theme/types.js";
+import { SystemProps } from "../system/system.js";
+import { IconProp } from "../icon/icon.types.js";
+
+//#region src/copyToClipboard/copyToClipboard.types.d.ts
+type CopyToClipboardProps = SystemProps & ThemingProps<'Button'> & {
+  /** Text string for copying */
+  copyText: string;
+  /** Icon @default falCopy  */
+  icon?: IconProp;
+  /** Button size @default "xs" */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+//#endregion
+export { CopyToClipboardProps };
+//# sourceMappingURL=copyToClipboard.types.d.ts.map

package/dist/copyToClipboard/copyToClipboard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.types.d.ts","names":[],"sources":["../../src/copyToClipboard/copyToClipboard.types.ts"],"sourcesContent":[],"mappings":";;;;;KAIY,oBAAA,GAAuB,cACjC;;EADU,QAAA,EAAA,MAAA;EAAoB;MAAG,CAAA,EAKxB,QALwB;;MAKxB,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA;CAAQ"}

package/dist/copyToClipboard/useCopyToClipboard.d.ts

@@ -0,0 +1,8 @@
+//#region src/copyToClipboard/useCopyToClipboard.d.ts
+declare const useCopyToClipboard: (copyText: string) => {
+  copy: () => void;
+  isCopyDisabled: boolean;
+};
+//#endregion
+export { useCopyToClipboard };
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/copyToClipboard/useCopyToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.d.ts","names":[],"sources":["../../src/copyToClipboard/useCopyToClipboard.ts"],"sourcesContent":[],"mappings":";cAEa;EAAA,IAAA,EAAA,GAAA,GAAA,IAAA"}

package/dist/copyToClipboard/useCopyToClipboard.js

@@ -0,0 +1,2 @@
+import{useToast as e}from"../toast/useToast.js";const t=t=>{let{showSuccess:n,showError:r}=e(),i=!window?.navigator?.clipboard?.writeText;return{copy:()=>{i||window?.navigator?.clipboard.writeText?.(t).then(()=>n(`Copied to clipboard: ${t}`)).catch(()=>r(`Copy failed`))},isCopyDisabled:i}};export{t as useCopyToClipboard};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=useCopyToClipboard.js.map

package/dist/copyToClipboard/useCopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.js","names":[],"sources":["../../src/copyToClipboard/useCopyToClipboard.ts"],"sourcesContent":["import { useToast } from '../toast'\n\nexport const useCopyToClipboard = (copyText: string) => {\n  const { showSuccess, showError } = useToast()\n  const isCopyDisabled = !window?.navigator?.clipboard?.writeText\n  const copy = () => {\n    if (!isCopyDisabled) {\n      window?.navigator?.clipboard\n        .writeText?.(copyText)\n        .then(() => showSuccess(`Copied to clipboard: ${copyText}`))\n        .catch(() => showError('Copy failed'))\n    }\n  }\n  return { copy, isCopyDisabled }\n}\n"],"mappings":"gDAEA,MAAa,EAAsB,GAAqB,CACtD,GAAM,CAAE,cAAa,aAAc,GAAU,CACvC,EAAiB,CAAC,QAAQ,WAAW,WAAW,UAStD,MAAO,CAAE,SARU,CACZ,GACH,QAAQ,WAAW,UAChB,YAAY,EAAS,CACrB,SAAW,EAAY,wBAAwB,IAAW,CAAC,CAC3D,UAAY,EAAU,cAAc,CAAC,EAG7B,iBAAgB"}

package/dist/core/consts.d.ts

@@ -0,0 +1,13 @@
+//#region src/core/consts.d.ts
+declare const cdnUrl = "https://cdn.veracity.com";
+declare const cdnStagUrl = "https://cdnstag.veracity.com";
+declare const cdnTestUrl = "https://cdntest.veracity.com";
+declare const cdnFontsPath = "/common/fonts";
+declare const cdnUrls: {
+  readonly Prod: "https://cdn.veracity.com";
+  readonly Stag: "https://cdnstag.veracity.com";
+  readonly Test: "https://cdntest.veracity.com";
+};
+//#endregion
+export { cdnFontsPath, cdnStagUrl, cdnTestUrl, cdnUrl, cdnUrls };
+//# sourceMappingURL=consts.d.ts.map

package/dist/core/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","names":[],"sources":["../../src/core/consts.ts"],"sourcesContent":[],"mappings":";cAAa,MAAA;AAAA,cACA,UAAA,GADM,8BAAA;AACN,cACA,UAAA,GADU,8BAAA;AACV,cACA,YAAA,GADU,eAAA;AACV,cAEA,OAFY,EAAA;EAEZ,SAAA,IAIH,EAAA,0BAAA"}

package/dist/core/consts.js

@@ -0,0 +1,2 @@
+const e=`https://cdn.veracity.com`,t=`https://cdnstag.veracity.com`,n=`https://cdntest.veracity.com`,r=`/common/fonts`,i={Prod:e,Stag:t,Test:n};export{r as cdnFontsPath,t as cdnStagUrl,n as cdnTestUrl,e as cdnUrl,i as cdnUrls};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=consts.js.map

package/dist/core/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/core/consts.ts"],"sourcesContent":["export const cdnUrl = 'https://cdn.veracity.com'\nexport const cdnStagUrl = 'https://cdnstag.veracity.com'\nexport const cdnTestUrl = 'https://cdntest.veracity.com'\nexport const cdnFontsPath = '/common/fonts'\n\nexport const cdnUrls = {\n  Prod: cdnUrl,\n  Stag: cdnStagUrl,\n  Test: cdnTestUrl,\n} as const\n"],"mappings":"AAAA,MAAa,EAAS,2BACT,EAAa,+BACb,EAAa,+BACb,EAAe,gBAEf,EAAU,CACrB,KAAM,EACN,KAAM,EACN,KAAM,EACP"}

package/dist/core/links.d.ts

@@ -0,0 +1,26 @@
+import { Dict, Environment } from "../utils/types.js";
+import { Dispatch, SetStateAction } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/core/links.d.ts
+type LinksDict = Dict<string>;
+type LinksContextType = [LinksDict, Dispatch<SetStateAction<LinksDict>>];
+/**
+ * Adds loggedIn=1 parameter to the URL if 'isLoggedIn' flag is true, which means the user is logged in.
+ * If 'isLoggedIn' is falsy, loggedin param will be removed.
+ * This is supposed to aid login flow when navigating between Veracity applications.
+ */
+declare function getLoggedInLink(link: string, isLoggedIn?: boolean): string;
+declare function LinksProvider(props: {
+  children: React.ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+/** Returns links and setLinks from LinksContext. */
+declare function useLinks(): LinksContextType;
+/**
+ * Retrieves the links from CDN for the given environment and appends them with loggedin=1 parameter
+ * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.
+ */
+declare function useLoadLinks(env?: Environment, isLoggedIn?: boolean): void;
+//#endregion
+export { LinksDict, LinksProvider, getLoggedInLink, useLinks, useLoadLinks };
+//# sourceMappingURL=links.d.ts.map

package/dist/core/links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"links.d.ts","names":[],"sources":["../../src/core/links.tsx"],"sourcesContent":[],"mappings":";;;;;KAOY,SAAA,GAAY;KAEnB,gBAAA,IAAoB,WAAW,SAAS,eAAe;;AAF5D;AAAoC;;;AAEwB,iBAS5C,eAAA,CAT4C,IAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,CAAA,EAAA,MAAA;AAAf,iBAsB7B,aAAA,CAtB6B,KAAA,EAAA;UAAT,EAsBa,KAAA,CAAM,SAtBnB;CAAQ,CAAA,EAsBsB,kBAAA,CAAA,GAAA,CAAA,OAtBtB;AAS5C;AAagB,iBAOA,QAAA,CAAA,CAPa,EAOL,gBAPK;;;;;AAOb,iBAeA,YAAA,CAfQ,GAAA,CAAA,EAeW,WAfX,EAAA,UAAA,CAAA,EAAA,OAAA,CAAA,EAAA,IAAA"}

package/dist/core/links.js

@@ -0,0 +1,2 @@
+import{cdnUrls as e}from"./consts.js";import{isObject as t}from"../utils/assertion.js";import{noop as n}from"../utils/function.js";import{useCallbackRef as r}from"../utils/react.js";import{createContext as i,useContext as a,useEffect as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";const l=i(void 0);function u(e,t){try{let n=new URL(e);return t?n.searchParams.append(`loggedin`,`1`):n.searchParams.delete(`loggedin`),n.toString()}catch{return e}}function d(e){let t=s({});return c(l.Provider,{value:t,...e})}function f(){let e=a(l);return e===void 0?(console.error(`useLinks must be used within a LinksContext.`),[{},n]):e}function p(n,i){let[,a]=f(),s=async n=>{try{let r=await fetch(`${e[n]}/common/data/links/base.json`);if(!r.ok)return;let i=await r.json();t(i)&&a(c(i))}catch{console.error(`Failed to retrieve links`)}},c=r(e=>Object.keys(e).reduce((t,n)=>(t[n]=u(e[n],i),t),{}));o(()=>{n&&s(n)},[n]),o(()=>{a(c)},[i])}export{d as LinksProvider,u as getLoggedInLink,f as useLinks,p as useLoadLinks};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=links.js.map

package/dist/core/links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"links.js","names":["env"],"sources":["../../src/core/links.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\n\nimport type { Dict, Environment } from '../utils'\nimport { isObject, noop, useCallbackRef } from '../utils'\nimport { cdnUrls } from './consts'\n\nexport type LinksDict = Dict<string>\n\ntype LinksContextType = [LinksDict, Dispatch<SetStateAction<LinksDict>>]\n\nconst LinksContext = createContext<LinksContextType | undefined>(undefined)\n\n/**\n * Adds loggedIn=1 parameter to the URL if 'isLoggedIn' flag is true, which means the user is logged in.\n * If 'isLoggedIn' is falsy, loggedin param will be removed.\n * This is supposed to aid login flow when navigating between Veracity applications.\n */\nexport function getLoggedInLink(link: string, isLoggedIn?: boolean) {\n  try {\n    const url = new URL(link)\n\n    if (isLoggedIn) url.searchParams.append('loggedin', '1')\n    else url.searchParams.delete('loggedin')\n\n    return url.toString()\n  } catch {\n    return link\n  }\n}\n\nexport function LinksProvider(props: { children: React.ReactNode }) {\n  const linksState = useState<LinksDict>({})\n\n  return <LinksContext.Provider value={linksState} {...props} />\n}\n\n/** Returns links and setLinks from LinksContext. */\nexport function useLinks() {\n  const context = useContext(LinksContext)\n\n  if (context === undefined) {\n    console.error('useLinks must be used within a LinksContext.')\n    return [{}, noop] as LinksContextType\n  }\n\n  return context\n}\n\n/**\n * Retrieves the links from CDN for the given environment and appends them with loggedin=1 parameter\n * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.\n */\nexport function useLoadLinks(env?: Environment, isLoggedIn?: boolean) {\n  const [, setLinks] = useLinks()\n\n  // Load links from the CDN for the given environment.\n  const loadLinks = async (env: Environment) => {\n    try {\n      const response = await fetch(`${cdnUrls[env]}/common/data/links/base.json`)\n      if (!response.ok) return\n\n      const data = await response.json()\n\n      if (isObject(data)) setLinks(updateLoggedInParam(data))\n    } catch {\n      console.error('Failed to retrieve links')\n    }\n  }\n\n  /**\n   * Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.\n   * useCallbackRef is used here to prevent a stale closure in async loadLinks.\n   */\n  const updateLoggedInParam = useCallbackRef((links: LinksDict) => {\n    return Object.keys(links).reduce((loggedInLinks: LinksDict, key) => {\n      loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn)\n      return loggedInLinks\n    }, {})\n  })\n\n  useEffect(() => {\n    if (!env) return\n\n    loadLinks(env)\n  }, [env])\n\n  useEffect(() => {\n    setLinks(updateLoggedInParam)\n  }, [isLoggedIn])\n}\n"],"mappings":"iTAWA,MAAM,EAAe,EAA4C,IAAA,GAAU,CAO3E,SAAgB,EAAgB,EAAc,EAAsB,CAClE,GAAI,CACF,IAAM,EAAM,IAAI,IAAI,EAAK,CAKzB,OAHI,EAAY,EAAI,aAAa,OAAO,WAAY,IAAI,CACnD,EAAI,aAAa,OAAO,WAAW,CAEjC,EAAI,UAAU,MACf,CACN,OAAO,GAIX,SAAgB,EAAc,EAAsC,CAClE,IAAM,EAAa,EAAoB,EAAE,CAAC,CAE1C,OAAO,EAAC,EAAa,SAAA,CAAS,MAAO,EAAY,GAAI,GAAS,CAIhE,SAAgB,GAAW,CACzB,IAAM,EAAU,EAAW,EAAa,CAOxC,OALI,IAAY,IAAA,IACd,QAAQ,MAAM,+CAA+C,CACtD,CAAC,EAAE,CAAE,EAAK,EAGZ,EAOT,SAAgB,EAAa,EAAmB,EAAsB,CACpE,GAAM,EAAG,GAAY,GAAU,CAGzB,EAAY,KAAO,IAAqB,CAC5C,GAAI,CACF,IAAM,EAAW,MAAM,MAAM,GAAG,EAAQA,GAAK,8BAA8B,CAC3E,GAAI,CAAC,EAAS,GAAI,OAElB,IAAM,EAAO,MAAM,EAAS,MAAM,CAE9B,EAAS,EAAK,EAAE,EAAS,EAAoB,EAAK,CAAC,MACjD,CACN,QAAQ,MAAM,2BAA2B,GAQvC,EAAsB,EAAgB,GACnC,OAAO,KAAK,EAAM,CAAC,QAAQ,EAA0B,KAC1D,EAAc,GAAO,EAAgB,EAAM,GAAM,EAAW,CACrD,GACN,EAAE,CAAC,CACN,CAEF,MAAgB,CACT,GAEL,EAAU,EAAI,EACb,CAAC,EAAI,CAAC,CAET,MAAgB,CACd,EAAS,EAAoB,EAC5B,CAAC,EAAW,CAAC"}

package/dist/core/media.d.ts

@@ -0,0 +1,37 @@
+import { AnyNumber, AnyString } from "../utils/types.js";
+import { Screen } from "../theme/types.js";
+import { ChildrenProp } from "./types.js";
+import { FC } from "react";
+import { useViewportWidth } from "@xstyled/styled-components";
+import { StyledProps } from "styled-components";
+
+//#region src/core/media.d.ts
+type ScreenWidth = Screen | AnyNumber | AnyString;
+type RenderOnScreenProps = {
+  /** Breakpoint to compare viewport width against. */
+  maxWidth?: Screen;
+  /** Breakpoint to compare viewport width against. */
+  minWidth?: Screen;
+};
+/** Returns CSS media string with appropriate min-width and max-width values. */
+declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate max-width value */
+declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/** Returns CSS media string with appropriate min-width value. */
+declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
+/**
+ * Renders its content when viewport width is at or above a provided breakpoint.
+ * Optionally, direction can be set to down, or below, the breakpoint.
+ */
+declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
+/** Returns true if current viewport width is smaller than provided width. */
+declare function useDown(width: ScreenWidth): boolean;
+/** Returns true if current viewport width is larger than or equal to provided width. */
+declare function useUp(width: ScreenWidth): boolean;
+/** Returns true if current viewport width is between provided min and max widths. */
+declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
+/** Return the width of the viewport. */
+
+//#endregion
+export { RenderOnScreen, RenderOnScreenProps, mediaBetween, mediaDown, mediaUp, useBetween, useDown, useUp, useViewportWidth };
+//# sourceMappingURL=media.d.ts.map

package/dist/core/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../src/core/media.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KASK,WAAA,GAAc,SAAS,YAAY;KAE5B,mBAAA;EAFP;EAAW,QAAA,CAAA,EAIH,MAJG;;UAAY,CAAA,EAMf,MANe;;;AAEhB,cAQC,YARkB,EAAA,CAAA,QAAA,EAQQ,WARR,EAAA,QAAA,EAQ+B,WAR/B,EAAA,GAAA,CAAA,KAAA,EAQuD,WARvD,CAAA,OAAA,CAAA,EAAA,GAAA,MAAA;;AAElB,cAUA,SAVA,EAAA,CAAA,KAAA,EAUoB,WAVpB,EAAA,GAAA,CAAA,KAAA,EAU4C,WAV5C,CAAA,OAAA,CAAA,EAAA,GAAA,MAAA;;AAEM,cAaN,OAbM,EAAA,CAAA,KAAA,EAaY,WAbZ,EAAA,GAAA,CAAA,KAAA,EAaoC,WAbpC,CAAA,OAAA,CAAA,EAAA,GAAA,MAAA;AAInB;;;;AAAsF,cAgBzE,cAhByE,EAgBzD,EAhByD,CAgBtD,mBAhBsD,GAgBhC,YAhBgC,CAAA;;AAIzE,iBAqDG,OAAA,CAnDf,KAAA,EAmD8B,WAnD9B,CAAA,EAAA,OAAA;;AAFgC,iBA4DjB,KAAA,CA5DiB,KAAA,EA4DJ,WA5DI,CAAA,EAAA,OAAA;;AAAmC,iBAmEpD,UAAA,CAnEoD,QAAA,EAmE/B,WAnE+B,EAAA,QAAA,EAmER,WAnEQ,CAAA,EAAA,OAAA;AAKpE"}

package/dist/core/media.js

@@ -0,0 +1,2 @@
+import{th as e,useTheme as t}from"./theme.js";import{Fragment as n,jsx as r}from"react/jsx-runtime";import{useViewportWidth as i}from"@xstyled/styled-components";const a=(t,n)=>r=>`@media (min-width: ${e.screen(t)(r)}) and (max-width: ${e.screen(n)(r)})`,o=t=>n=>`@media (max-width: ${e.screen(t)(n)})`,s=t=>n=>`@media (min-width: ${e.screen(t)(n)})`,c=({children:e,maxWidth:t,minWidth:i})=>i&&t?r(l,{maxWidth:t,minWidth:i,children:e}):i?r(u,{width:i,children:e}):t?r(d,{width:t,children:e}):r(n,{children:e}),l=({children:e,maxWidth:t,minWidth:i})=>h(i,t)?r(n,{children:e}):null,u=({children:e,width:t})=>m(t)?r(n,{children:e}):null,d=({children:e,width:t})=>p(t)?r(n,{children:e}):null;function f(n){let r=t(),a=i(),o=e.screen(n)({theme:r});return{value:Number(o.replace(`px`,``)),viewportWidth:a}}function p(e){let{value:t,viewportWidth:n}=f(e);return n!==null&&t!==null&&n<t}function m(e){let{value:t,viewportWidth:n}=f(e);return n!==null&&t!==null&&n>=t}function h(e,t){let n=p(t),r=m(e);return n&&r}export{c as RenderOnScreen,a as mediaBetween,o as mediaDown,s as mediaUp,h as useBetween,p as useDown,m as useUp,i as useViewportWidth};globalThis.__vuiVersion__=`3.0.0-beta.6`;
+//# sourceMappingURL=media.js.map

package/dist/core/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","names":["th","RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>","RenderBetween: FC<{ maxWidth: Screen; minWidth: Screen } & ChildrenProp>","RenderOver: FC<{ width: Screen } & ChildrenProp>","RenderUnder: FC<{ width: Screen } & ChildrenProp>"],"sources":["../../src/core/media.tsx"],"sourcesContent":["import { useViewportWidth } from '@xstyled/styled-components'\nimport type { FC } from 'react'\nimport type { StyledProps } from 'styled-components'\n\nimport type { Screen } from '../theme'\nimport type { AnyNumber, AnyString } from '../utils'\nimport { th, useTheme } from './theme'\nimport type { ChildrenProp } from './types'\n\ntype ScreenWidth = Screen | AnyNumber | AnyString\n\nexport type RenderOnScreenProps = {\n  /** Breakpoint to compare viewport width against. */\n  maxWidth?: Screen\n  /** Breakpoint to compare viewport width against. */\n  minWidth?: Screen\n}\n\n/** Returns CSS media string with appropriate min-width and max-width values. */\nexport const mediaBetween = (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) =>\n  `@media (min-width: ${th.screen(minWidth)(props)}) and (max-width: ${th.screen(maxWidth)(props)})`\n\n/** Returns CSS media string with appropriate max-width value */\nexport const mediaDown = (width: ScreenWidth) => (props: StyledProps<unknown>) => {\n  return `@media (max-width: ${th.screen(width)(props)})`\n}\n\n/** Returns CSS media string with appropriate min-width value. */\nexport const mediaUp = (width: ScreenWidth) => (props: StyledProps<unknown>) =>\n  `@media (min-width: ${th.screen(width)(props)})`\n\n/**\n * Renders its content when viewport width is at or above a provided breakpoint.\n * Optionally, direction can be set to down, or below, the breakpoint.\n */\nexport const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp> = ({ children, maxWidth, minWidth }) => {\n  if (minWidth && maxWidth) {\n    return (\n      <RenderBetween maxWidth={maxWidth} minWidth={minWidth}>\n        {children}\n      </RenderBetween>\n    )\n  }\n  if (minWidth) {\n    return <RenderOver width={minWidth}>{children}</RenderOver>\n  }\n  if (maxWidth) {\n    return <RenderUnder width={maxWidth}>{children}</RenderUnder>\n  }\n  return <>{children}</>\n}\nconst RenderBetween: FC<{ maxWidth: Screen; minWidth: Screen } & ChildrenProp> = ({ children, maxWidth, minWidth }) => {\n  const isBetween = useBetween(minWidth, maxWidth)\n  return isBetween ? <>{children}</> : null\n}\nconst RenderOver: FC<{ width: Screen } & ChildrenProp> = ({ children, width }) => {\n  const isOver = useUp(width)\n  return isOver ? <>{children}</> : null\n}\nconst RenderUnder: FC<{ width: Screen } & ChildrenProp> = ({ children, width }) => {\n  const isUnder = useDown(width)\n  return isUnder ? <>{children}</> : null\n}\n\n/** /!\\ No need to export it, keep it internal */\n/** Returns viewport width and provided screen width as a number. */\nfunction useMedia(width: ScreenWidth) {\n  const theme = useTheme()\n  const viewportWidth = useViewportWidth()\n  const valueString = th.screen(width)({ theme }) as string\n  const value = Number(valueString.replace('px', ''))\n\n  return { value, viewportWidth }\n}\n\n/** Returns true if current viewport width is smaller than provided width. */\nexport function useDown(width: ScreenWidth) {\n  const { value, viewportWidth } = useMedia(width)\n\n  return viewportWidth !== null && value !== null && viewportWidth < value\n}\n\n/** Returns true if current viewport width is larger than or equal to provided width. */\nexport function useUp(width: ScreenWidth) {\n  const { value, viewportWidth } = useMedia(width)\n\n  return viewportWidth !== null && value !== null && viewportWidth >= value\n}\n\n/** Returns true if current viewport width is between provided min and max widths. */\nexport function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth) {\n  const isDown = useDown(maxWidth)\n  const isUp = useUp(minWidth)\n\n  return isDown && isUp\n}\n\n/** Return the width of the viewport. */\nexport { useViewportWidth }\n"],"mappings":"kKAmBA,MAAa,GAAgB,EAAuB,IAA2B,GAC7E,sBAAsBA,EAAG,OAAO,EAAS,CAAC,EAAM,CAAC,oBAAoBA,EAAG,OAAO,EAAS,CAAC,EAAM,CAAC,GAGrF,EAAa,GAAwB,GACzC,sBAAsBA,EAAG,OAAO,EAAM,CAAC,EAAM,CAAC,GAI1C,EAAW,GAAwB,GAC9C,sBAAsBA,EAAG,OAAO,EAAM,CAAC,EAAM,CAAC,GAMnCC,GAA0D,CAAE,WAAU,WAAU,cACvF,GAAY,EAEZ,EAAC,EAAA,CAAwB,WAAoB,WAC1C,YACa,CAGhB,EACK,EAAC,EAAA,CAAW,MAAO,EAAW,YAAsB,CAEzD,EACK,EAAC,EAAA,CAAY,MAAO,EAAW,YAAuB,CAExD,EAAA,EAAA,CAAG,WAAA,CAAY,CAElBC,GAA4E,CAAE,WAAU,WAAU,cACpF,EAAW,EAAU,EAAS,CAC7B,EAAA,EAAA,CAAG,WAAA,CAAY,CAAG,KAEjCC,GAAoD,CAAE,WAAU,WACrD,EAAM,EAAM,CACX,EAAA,EAAA,CAAG,WAAA,CAAY,CAAG,KAE9BC,GAAqD,CAAE,WAAU,WACrD,EAAQ,EAAM,CACb,EAAA,EAAA,CAAG,WAAA,CAAY,CAAG,KAKrC,SAAS,EAAS,EAAoB,CACpC,IAAM,EAAQ,GAAU,CAClB,EAAgB,GAAkB,CAClC,EAAcJ,EAAG,OAAO,EAAM,CAAC,CAAE,QAAO,CAAC,CAG/C,MAAO,CAAE,MAFK,OAAO,EAAY,QAAQ,KAAM,GAAG,CAAC,CAEnC,gBAAe,CAIjC,SAAgB,EAAQ,EAAoB,CAC1C,GAAM,CAAE,QAAO,iBAAkB,EAAS,EAAM,CAEhD,OAAO,IAAkB,MAAQ,IAAU,MAAQ,EAAgB,EAIrE,SAAgB,EAAM,EAAoB,CACxC,GAAM,CAAE,QAAO,iBAAkB,EAAS,EAAM,CAEhD,OAAO,IAAkB,MAAQ,IAAU,MAAQ,GAAiB,EAItE,SAAgB,EAAW,EAAuB,EAAuB,CACvE,IAAM,EAAS,EAAQ,EAAS,CAC1B,EAAO,EAAM,EAAS,CAE5B,OAAO,GAAU"}