fictoan-react 2.0.0-beta.18 → 2.0.0-beta.19

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { ToastsProvider, useToasts, type ToastsProviderProps, type ToastFunction
 export { Tooltip, type TooltipProps } from './components/Tooltip';
 export { useViewTransition } from './hooks/UseViewTransition';
 export { Text, type TextProps, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, type HeadingProps, } from './components/Typography';
-export { BasicColours, FictoanColours, type ColourPropTypes, type EmphasisTypes, type SpacingTypes, type ShadowTypes, type ShapeTypes, type OpacityTypes, type WeightTypes, type ButtonVariantTypes, } from './components/Element/constants';
+export { BasicColours, FictoanColours, type ColourPropTypes, type EmphasisTypes, type SpacingTypes, type ShadowTypes, type ShapeTypes, type OpacityTypes, type WeightTypes, type ButtonVariantTypes, type CommonProps, type CommonAndHTMLProps, type FlexibleEventHandler, } from './components/Element/constants';
 export { oklchColourDefinitions, type ColourDefinition, type OklchColourName, } from './styles/colours';
+export { useClickOutside } from './hooks/UseClickOutside';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,wCAAwC,CAAC;AAGhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAGhC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE9E,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EACH,OAAO,EACP,KAAK,YAAY,EACjB,GAAG,EACH,OAAO,EACP,KAAK,EACL,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,GAAG,EACH,OAAO,EACP,IAAI,EACJ,SAAS,GACZ,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACH,IAAI,EACJ,KAAK,SAAS,EACd,QAAQ,EACR,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,kBAAkB,EACvB,UAAU,EACV,KAAK,eAAe,EACpB,QAAQ,EACR,KAAK,aAAa,EAClB,UAAU,EACV,KAAK,eAAe,EACpB,MAAM,EACN,KAAK,WAAW,EAChB,UAAU,EACV,KAAK,eAAe,EACpB,UAAU,EACV,KAAK,eAAe,EACpB,WAAW,EACX,KAAK,gBAAgB,EACrB,QAAQ,EACR,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,eAAe,EACpB,MAAM,EACN,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,UAAU,EACf,aAAa,EACb,KAAK,kBAAkB,EACvB,aAAa,EACb,KAAK,kBAAkB,EACvB,OAAO,EACP,KAAK,YAAY,GACpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,gBAAgB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACH,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GACpB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE3E,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEzG,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EACH,cAAc,EACd,KAAK,sBAAsB,EAC3B,cAAc,EACd,KAAK,mBAAmB,EACxB,aAAa,EACb,KAAK,qBAAqB,EAC1B,iBAAiB,EACjB,KAAK,yBAAyB,EAC9B,WAAW,EACX,KAAK,mBAAmB,EACxB,aAAa,EACb,KAAK,qBAAqB,GAC7B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACH,QAAQ,EACR,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,kBAAkB,GAC1B,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE9F,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,KAAK,mBAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE7G,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EACH,IAAI,EACJ,KAAK,SAAS,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,YAAY,GACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACH,YAAY,EACZ,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,GAC5B,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACH,sBAAsB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACvB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -12,137 +12,139 @@
 import { useViewTransition as u } from "./hooks/UseViewTransition.js";
 import { BasicColours as l, FictoanColours as c } from "./components/Element/constants.js";
 import { oklchColourDefinitions as S } from "./styles/colours.js";
-import { Accordion as T } from "./components/Accordion/Accordion.js";
-import { Badge as B } from "./components/Badge/Badge.js";
-import { Breadcrumbs as F } from "./components/Breadcrumbs/Breadcrumbs.js";
-import { Button as h } from "./components/Button/Button.js";
-import { ButtonGroup as I } from "./components/ButtonGroup/ButtonGroup.js";
-import { Callout as v } from "./components/Callout/Callout.js";
-import { Card as R } from "./components/Card/Card.js";
-import { CodeBlock as D } from "./components/CodeBlock/CodeBlock.js";
-import { Divider as M } from "./components/Divider/Divider.js";
-import { Drawer as y } from "./components/Drawer/Drawer.js";
-import { Element as W } from "./components/Element/Element.js";
-import { Article as U, Aside as V, Body as j, Div as q, Footer as z, Header as J, Hyperlink as K, Main as Q, Nav as X, Section as Y, Span as Z } from "./components/Element/Tags.js";
-import { Form as $ } from "./components/Form/Form/Form.js";
-import { FormItem as ro } from "./components/Form/FormItem/FormItem.js";
-import { FormItemGroup as to } from "./components/Form/FormItemGroup/FormItemGroup.js";
-import { InputField as mo } from "./components/Form/InputField/InputField.js";
-import { TextArea as xo } from "./components/Form/TextArea/TextArea.js";
-import { InputLabel as ao } from "./components/Form/InputLabel/InputLabel.js";
-import { Select as uo } from "./components/Form/Select/Select.js";
-import { FileUpload as lo } from "./components/Form/FileUpload/FileUpload.js";
-import { RadioGroup as Co } from "./components/Form/RadioButton/RadioGroup.js";
-import { RadioButton as bo } from "./components/Form/RadioButton/RadioButton.js";
-import { Checkbox as go } from "./components/Form/Checkbox/Checkbox.js";
-import { CheckboxGroup as Go, SwitchGroup as Fo } from "./components/Form/Checkbox/CheckboxAndSwitchGroup.js";
-import { Switch as ho } from "./components/Form/Checkbox/Switch.js";
-import { Range as Io } from "./components/Form/Range/Range.js";
-import { RadioTabGroup as vo } from "./components/Form/RadioButton/RadioTabGroup.js";
-import { PinInputField as Ro } from "./components/Form/PinInputField/PinInputField.js";
-import { ListBox as Do } from "./components/Form/ListBox/ListBox.js";
-import { Meter as Mo } from "./components/Meter/Meter.js";
-import { Modal as yo } from "./components/Modal/Modal.js";
-import { NotificationsProvider as Wo, useNotifications as Eo } from "./components/Notification/NotificationsProvider/NotificationsProvider.js";
-import { OptionCard as Vo, OptionCardsGroup as jo, useOptionCard as qo, useOptionCardsGroup as zo } from "./components/OptionCard/OptionCard.js";
-import { Pagination as Ko } from "./components/Pagination/Pagination.js";
-import { Portion as Xo } from "./components/Portion/Portion.js";
-import { ProgressBar as Zo } from "./components/ProgressBar/ProgressBar.js";
-import { Row as $o } from "./components/Row/Row.js";
-import { SidebarWrapper as rr } from "./components/Sidebar/SidebarWrapper/SidebarWrapper.js";
-import { ContentWrapper as tr } from "./components/Sidebar/ContentWrapper/ContentWrapper.js";
-import { SidebarHeader as mr } from "./components/Sidebar/SidebarHeader/SidebarHeader.js";
-import { SidebarItemsGroup as xr } from "./components/Sidebar/SidebarItemsGroup/SidebarItemsGroup.js";
-import { SidebarItem as ar } from "./components/Sidebar/SidebarItem/SidebarItem.js";
-import { SidebarFooter as dr } from "./components/Sidebar/SidebarFooter/SidebarFooter.js";
-import { Skeleton as sr, SkeletonGroup as lr } from "./components/Skeleton/Skeleton.js";
-import { Spinner as Cr } from "./components/Spinner/Spinner.js";
-import { Table as br } from "./components/Table/Table.js";
-import { Tabs as gr } from "./components/Tabs/Tabs.js";
-import { ThemeProvider as Gr, useTheme as Fr } from "./components/ThemeProvider/ThemeProvider.js";
-import { ToastsProvider as hr, useToasts as kr } from "./components/Toast/ToastsProvider/ToastsProvider.js";
-import { Tooltip as Pr } from "./components/Tooltip/Tooltip.js";
-import { Text as wr } from "./components/Typography/Text.js";
-import { Heading1 as Ar, Heading2 as Dr, Heading3 as Or, Heading4 as Mr, Heading5 as Nr, Heading6 as yr } from "./components/Typography/Heading.js";
+import { useClickOutside as T } from "./hooks/UseClickOutside.js";
+import { Accordion as B } from "./components/Accordion/Accordion.js";
+import { Badge as F } from "./components/Badge/Badge.js";
+import { Breadcrumbs as k } from "./components/Breadcrumbs/Breadcrumbs.js";
+import { Button as I } from "./components/Button/Button.js";
+import { ButtonGroup as v } from "./components/ButtonGroup/ButtonGroup.js";
+import { Callout as O } from "./components/Callout/Callout.js";
+import { Card as A } from "./components/Card/Card.js";
+import { CodeBlock as M } from "./components/CodeBlock/CodeBlock.js";
+import { Divider as y } from "./components/Divider/Divider.js";
+import { Drawer as W } from "./components/Drawer/Drawer.js";
+import { Element as U } from "./components/Element/Element.js";
+import { Article as j, Aside as q, Body as z, Div as J, Footer as K, Header as Q, Hyperlink as X, Main as Y, Nav as Z, Section as _, Span as $ } from "./components/Element/Tags.js";
+import { Form as ro } from "./components/Form/Form/Form.js";
+import { FormItem as to } from "./components/Form/FormItem/FormItem.js";
+import { FormItemGroup as mo } from "./components/Form/FormItemGroup/FormItemGroup.js";
+import { InputField as xo } from "./components/Form/InputField/InputField.js";
+import { TextArea as ao } from "./components/Form/TextArea/TextArea.js";
+import { InputLabel as uo } from "./components/Form/InputLabel/InputLabel.js";
+import { Select as lo } from "./components/Form/Select/Select.js";
+import { FileUpload as Co } from "./components/Form/FileUpload/FileUpload.js";
+import { RadioGroup as bo } from "./components/Form/RadioButton/RadioGroup.js";
+import { RadioButton as go } from "./components/Form/RadioButton/RadioButton.js";
+import { Checkbox as Go } from "./components/Form/Checkbox/Checkbox.js";
+import { CheckboxGroup as Ho, SwitchGroup as ko } from "./components/Form/Checkbox/CheckboxAndSwitchGroup.js";
+import { Switch as Io } from "./components/Form/Checkbox/Switch.js";
+import { Range as vo } from "./components/Form/Range/Range.js";
+import { RadioTabGroup as Oo } from "./components/Form/RadioButton/RadioTabGroup.js";
+import { PinInputField as Ao } from "./components/Form/PinInputField/PinInputField.js";
+import { ListBox as Mo } from "./components/Form/ListBox/ListBox.js";
+import { Meter as yo } from "./components/Meter/Meter.js";
+import { Modal as Wo } from "./components/Modal/Modal.js";
+import { NotificationsProvider as Uo, useNotifications as Vo } from "./components/Notification/NotificationsProvider/NotificationsProvider.js";
+import { OptionCard as qo, OptionCardsGroup as zo, useOptionCard as Jo, useOptionCardsGroup as Ko } from "./components/OptionCard/OptionCard.js";
+import { Pagination as Xo } from "./components/Pagination/Pagination.js";
+import { Portion as Zo } from "./components/Portion/Portion.js";
+import { ProgressBar as $o } from "./components/ProgressBar/ProgressBar.js";
+import { Row as rr } from "./components/Row/Row.js";
+import { SidebarWrapper as tr } from "./components/Sidebar/SidebarWrapper/SidebarWrapper.js";
+import { ContentWrapper as mr } from "./components/Sidebar/ContentWrapper/ContentWrapper.js";
+import { SidebarHeader as xr } from "./components/Sidebar/SidebarHeader/SidebarHeader.js";
+import { SidebarItemsGroup as ar } from "./components/Sidebar/SidebarItemsGroup/SidebarItemsGroup.js";
+import { SidebarItem as dr } from "./components/Sidebar/SidebarItem/SidebarItem.js";
+import { SidebarFooter as sr } from "./components/Sidebar/SidebarFooter/SidebarFooter.js";
+import { Skeleton as cr, SkeletonGroup as Cr } from "./components/Skeleton/Skeleton.js";
+import { Spinner as br } from "./components/Spinner/Spinner.js";
+import { Table as gr } from "./components/Table/Table.js";
+import { Tabs as Gr } from "./components/Tabs/Tabs.js";
+import { ThemeProvider as Hr, useTheme as kr } from "./components/ThemeProvider/ThemeProvider.js";
+import { ToastsProvider as Ir, useToasts as Pr } from "./components/Toast/ToastsProvider/ToastsProvider.js";
+import { Tooltip as wr } from "./components/Tooltip/Tooltip.js";
+import { Text as Rr } from "./components/Typography/Text.js";
+import { Heading1 as Dr, Heading2 as Mr, Heading3 as Nr, Heading4 as yr, Heading5 as Lr, Heading6 as Wr } from "./components/Typography/Heading.js";
 export {
-  T as Accordion,
-  U as Article,
-  V as Aside,
-  B as Badge,
+  B as Accordion,
+  j as Article,
+  q as Aside,
+  F as Badge,
   l as BasicColours,
-  j as Body,
-  F as Breadcrumbs,
-  h as Button,
-  I as ButtonGroup,
-  v as Callout,
-  R as Card,
-  go as Checkbox,
-  Go as CheckboxGroup,
-  D as CodeBlock,
-  tr as ContentWrapper,
-  q as Div,
-  M as Divider,
-  y as Drawer,
-  W as Element,
+  z as Body,
+  k as Breadcrumbs,
+  I as Button,
+  v as ButtonGroup,
+  O as Callout,
+  A as Card,
+  Go as Checkbox,
+  Ho as CheckboxGroup,
+  M as CodeBlock,
+  mr as ContentWrapper,
+  J as Div,
+  y as Divider,
+  W as Drawer,
+  U as Element,
   c as FictoanColours,
-  lo as FileUpload,
-  z as Footer,
-  $ as Form,
-  ro as FormItem,
-  to as FormItemGroup,
-  J as Header,
-  Ar as Heading1,
-  Dr as Heading2,
-  Or as Heading3,
-  Mr as Heading4,
-  Nr as Heading5,
-  yr as Heading6,
-  K as Hyperlink,
-  mo as InputField,
-  ao as InputLabel,
-  Do as ListBox,
-  Q as Main,
-  Mo as Meter,
-  yo as Modal,
-  X as Nav,
-  Wo as NotificationsProvider,
-  Vo as OptionCard,
-  jo as OptionCardsGroup,
-  Ko as Pagination,
-  Ro as PinInputField,
-  Xo as Portion,
-  Zo as ProgressBar,
-  bo as RadioButton,
-  Co as RadioGroup,
-  vo as RadioTabGroup,
-  Io as Range,
-  $o as Row,
-  Y as Section,
-  uo as Select,
-  dr as SidebarFooter,
-  mr as SidebarHeader,
-  ar as SidebarItem,
-  xr as SidebarItemsGroup,
-  rr as SidebarWrapper,
-  sr as Skeleton,
-  lr as SkeletonGroup,
-  Z as Span,
-  Cr as Spinner,
-  ho as Switch,
-  Fo as SwitchGroup,
-  br as Table,
-  gr as Tabs,
-  wr as Text,
-  xo as TextArea,
-  Gr as ThemeProvider,
-  hr as ToastsProvider,
-  Pr as Tooltip,
+  Co as FileUpload,
+  K as Footer,
+  ro as Form,
+  to as FormItem,
+  mo as FormItemGroup,
+  Q as Header,
+  Dr as Heading1,
+  Mr as Heading2,
+  Nr as Heading3,
+  yr as Heading4,
+  Lr as Heading5,
+  Wr as Heading6,
+  X as Hyperlink,
+  xo as InputField,
+  uo as InputLabel,
+  Mo as ListBox,
+  Y as Main,
+  yo as Meter,
+  Wo as Modal,
+  Z as Nav,
+  Uo as NotificationsProvider,
+  qo as OptionCard,
+  zo as OptionCardsGroup,
+  Xo as Pagination,
+  Ao as PinInputField,
+  Zo as Portion,
+  $o as ProgressBar,
+  go as RadioButton,
+  bo as RadioGroup,
+  Oo as RadioTabGroup,
+  vo as Range,
+  rr as Row,
+  _ as Section,
+  lo as Select,
+  sr as SidebarFooter,
+  xr as SidebarHeader,
+  dr as SidebarItem,
+  ar as SidebarItemsGroup,
+  tr as SidebarWrapper,
+  cr as Skeleton,
+  Cr as SkeletonGroup,
+  $ as Span,
+  br as Spinner,
+  Io as Switch,
+  ko as SwitchGroup,
+  gr as Table,
+  Gr as Tabs,
+  Rr as Text,
+  ao as TextArea,
+  Hr as ThemeProvider,
+  Ir as ToastsProvider,
+  wr as Tooltip,
   S as oklchColourDefinitions,
-  Eo as useNotifications,
-  qo as useOptionCard,
-  zo as useOptionCardsGroup,
-  Fr as useTheme,
-  kr as useToasts,
+  T as useClickOutside,
+  Vo as useNotifications,
+  Jo as useOptionCard,
+  Ko as useOptionCardsGroup,
+  kr as useTheme,
+  Pr as useToasts,
   u as useViewTransition
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/classNames.d.ts

@@ -1,2 +1,2 @@
-export declare const createClassName: (classNames: any[]) => string;
+export declare const createClassName: (classNames: (string | number | boolean | null | undefined)[]) => string;
 //# sourceMappingURL=classNames.d.ts.map

package/dist/utils/classNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"classNames.d.ts","sourceRoot":"","sources":["../../src/utils/classNames.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,YAAY,GAAG,EAAE,KAAG,MAEnD,CAAC"}
+{"version":3,"file":"classNames.d.ts","sourceRoot":"","sources":["../../src/utils/classNames.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,YAAY,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,KAAG,MAE9F,CAAC"}

package/dist/utils/classNames.js.map

@@ -1 +1 @@
-{"version":3,"file":"classNames.js","sources":["../../src/utils/classNames.ts"],"sourcesContent":["export const createClassName = (classNames: any[]): string => {\n    return classNames.filter((item) => !!item).join(\" \");\n};\n"],"names":["createClassName","classNames","item"],"mappings":"AAAO,MAAMA,IAAkB,CAACC,MACrBA,EAAW,OAAO,CAACC,MAAS,CAAC,CAACA,CAAI,EAAE,KAAK,GAAG;"}
+{"version":3,"file":"classNames.js","sources":["../../src/utils/classNames.ts"],"sourcesContent":["export const createClassName = (classNames: (string | number | boolean | null | undefined)[]): string => {\n    return classNames.filter((item) => !!item).join(\" \");\n};\n"],"names":["createClassName","classNames","item"],"mappings":"AAAO,MAAMA,IAAkB,CAACC,MACrBA,EAAW,OAAO,CAACC,MAAS,CAAC,CAACA,CAAI,EAAE,KAAK,GAAG;"}

package/dist/utils/propSeparation.js

@@ -19,8 +19,8 @@ const l = [
   "opacity",
   // Layout
   "layoutAsFlexbox",
-  "stackVertically",
-  "stackHorizontally",
+  "listVertically",
+  "listHorizontally",
   "layoutAsGrid",
   "columns",
   "gap",
@@ -62,7 +62,7 @@ const l = [
   "weight",
   // Custom classes
   "classNames"
-], a = (t) => {
+], i = (t) => {
   const e = {}, r = {};
   for (const o of Object.keys(t))
     l.includes(o) ? e[o] = t[o] : r[o] = t[o];
@@ -72,6 +72,6 @@ const l = [
   };
 };
 export {
-  a as separateWrapperProps
+  i as separateWrapperProps
 };
 //# sourceMappingURL=propSeparation.js.map

package/dist/utils/propSeparation.js.map

@@ -1 +1 @@
-{"version":3,"file":"propSeparation.js","sources":["../../src/utils/propSeparation.ts"],"sourcesContent":["// LOCAL COMPONENTS ====================================================================================================\nimport { CommonProps, SpacingTypes } from \"$components/Element/constants\";\n\nexport interface PropSeparationResult<T extends Record<string, any>> {\n    fictoanProps : {\n        size ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n    };\n    htmlProps    : Omit<T, \"size\"> & {\n        size ? : number;\n    };\n}\n\n/**\n * Separates Fictoan-specific props from HTML props to prevent conflicts.\n *\n * The main conflict is with the 'size' prop:\n * - Fictoan uses size as a string for CSS classes (e.g., \"small\", \"medium\", \"large\")\n * - HTML form elements use size as a number for visual width\n *\n * @param props - The props object to separate\n * @returns Object with fictoanProps and htmlProps\n */\nexport const separateFictoanFromHTMLProps = <T extends Record<string, any>>(\n    props : T,\n) : PropSeparationResult<T> => {\n    const {size, ...htmlProps} = props;\n\n    // Check if size is a valid FormItem size (excluding nano and huge)\n    const isValidFormItemSize = typeof size === \"string\" && [\n        \"none\", \"micro\", \"tiny\", \"small\", \"medium\", \"large\",\n    ].includes(size);\n\n    return {\n        fictoanProps : {\n            size : isValidFormItemSize ? size as Exclude<SpacingTypes, \"nano\" | \"huge\"> : undefined,\n        },\n        htmlProps    : typeof size === \"number\" ? {...htmlProps, size} : htmlProps,\n    };\n};\n\n// List of CommonProps keys that should be applied to wrapper elements (like FormItem)\n// rather than to inner input elements\nconst WRAPPER_PROP_KEYS: (keyof CommonProps)[] = [\n    // Colours\n    \"bgColor\",\n    \"bgColour\",\n    \"bgOpacity\",\n    \"textColor\",\n    \"textColour\",\n    \"borderColor\",\n    \"borderColour\",\n    \"borderOpacity\",\n    \"fillColor\",\n    \"fillColour\",\n    \"strokeColor\",\n    \"strokeColour\",\n    // Visual\n    \"shadow\",\n    \"shape\",\n    \"opacity\",\n    // Layout\n    \"layoutAsFlexbox\",\n    \"stackVertically\",\n    \"stackHorizontally\",\n    \"layoutAsGrid\",\n    \"columns\",\n    \"gap\",\n    // Margin\n    \"margin\",\n    \"horizontalMargin\",\n    \"verticalMargin\",\n    \"marginTop\",\n    \"marginRight\",\n    \"marginBottom\",\n    \"marginLeft\",\n    // Padding\n    \"padding\",\n    \"horizontalPadding\",\n    \"verticalPadding\",\n    \"paddingTop\",\n    \"paddingRight\",\n    \"paddingBottom\",\n    \"paddingLeft\",\n    // Alignment\n    \"horizontallyCentreThis\",\n    \"horizontallyCenterThis\",\n    \"verticallyCentreItems\",\n    \"verticallyCenterItems\",\n    \"pushItemsToEnds\",\n    // Sizing\n    \"isFullWidth\",\n    \"isFullHeight\",\n    // Responsive visibility\n    \"hideOnMobile\",\n    \"showOnlyOnMobile\",\n    \"hideOnTabletPortrait\",\n    \"showOnlyOnTabletPortrait\",\n    \"hideOnTabletLandscape\",\n    \"showOnlyOnTabletLandscape\",\n    \"hideOnDesktop\",\n    \"showOnlyOnDesktop\",\n    // Typography\n    \"weight\",\n    // Custom classes\n    \"classNames\",\n];\n\nexport interface WrapperInputSeparationResult<T extends Record<string, any>> {\n    wrapperProps : Partial<CommonProps>;\n    inputProps   : Omit<T, keyof CommonProps>;\n}\n\n/**\n * Separates wrapper-level props (margin, padding, layout, etc.) from input-specific props.\n *\n * Form components like TextArea and InputField wrap their input in a FormItem.\n * Layout/spacing props should be applied to FormItem (the wrapper), not the inner input.\n *\n * @param props - The props object to separate\n * @returns Object with wrapperProps (for FormItem) and inputProps (for the input element)\n *\n * @example\n * const { wrapperProps, inputProps } = separateWrapperProps(props);\n * return (\n *   <FormItem {...wrapperProps}>\n *     <Element as=\"textarea\" {...inputProps} />\n *   </FormItem>\n * );\n */\nexport const separateWrapperProps = <T extends Record<string, any>>(\n    props: T,\n): WrapperInputSeparationResult<T> => {\n    const wrapperProps: Partial<CommonProps> = {};\n    const inputProps: Record<string, any> = {};\n\n    for (const key of Object.keys(props)) {\n        if (WRAPPER_PROP_KEYS.includes(key as keyof CommonProps)) {\n            (wrapperProps as any)[key] = props[key];\n        } else {\n            inputProps[key] = props[key];\n        }\n    }\n\n    return {\n        wrapperProps,\n        inputProps: inputProps as Omit<T, keyof CommonProps>,\n    };\n};"],"names":["WRAPPER_PROP_KEYS","separateWrapperProps","props","wrapperProps","inputProps","key"],"mappings":"AA0CA,MAAMA,IAA2C;AAAA;AAAA,EAE7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AACJ,GAwBaC,IAAuB,CAChCC,MACkC;AAClC,QAAMC,IAAqC,CAAA,GACrCC,IAAkC,CAAA;AAExC,aAAWC,KAAO,OAAO,KAAKH,CAAK;AAC/B,IAAIF,EAAkB,SAASK,CAAwB,IAClDF,EAAqBE,CAAG,IAAIH,EAAMG,CAAG,IAEtCD,EAAWC,CAAG,IAAIH,EAAMG,CAAG;AAInC,SAAO;AAAA,IACH,cAAAF;AAAA,IACA,YAAAC;AAAA,EAAA;AAER;"}
+{"version":3,"file":"propSeparation.js","sources":["../../src/utils/propSeparation.ts"],"sourcesContent":["// LOCAL COMPONENTS ====================================================================================================\nimport { CommonProps, SpacingTypes } from \"$components/Element/constants\";\n\nexport interface PropSeparationResult<T extends Record<string, any>> {\n    fictoanProps : {\n        size ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n    };\n    htmlProps    : Omit<T, \"size\"> & {\n        size ? : number;\n    };\n}\n\n/**\n * Separates Fictoan-specific props from HTML props to prevent conflicts.\n *\n * The main conflict is with the 'size' prop:\n * - Fictoan uses size as a string for CSS classes (e.g., \"small\", \"medium\", \"large\")\n * - HTML form elements use size as a number for visual width\n *\n * @param props - The props object to separate\n * @returns Object with fictoanProps and htmlProps\n */\nexport const separateFictoanFromHTMLProps = <T extends Record<string, any>>(\n    props : T,\n) : PropSeparationResult<T> => {\n    const {size, ...htmlProps} = props;\n\n    // Check if size is a valid FormItem size (excluding nano and huge)\n    const isValidFormItemSize = typeof size === \"string\" && [\n        \"none\", \"micro\", \"tiny\", \"small\", \"medium\", \"large\",\n    ].includes(size);\n\n    return {\n        fictoanProps : {\n            size : isValidFormItemSize ? size as Exclude<SpacingTypes, \"nano\" | \"huge\"> : undefined,\n        },\n        htmlProps    : typeof size === \"number\" ? {...htmlProps, size} : htmlProps,\n    };\n};\n\n// List of CommonProps keys that should be applied to wrapper elements (like FormItem)\n// rather than to inner input elements\nconst WRAPPER_PROP_KEYS: (keyof CommonProps)[] = [\n    // Colours\n    \"bgColor\",\n    \"bgColour\",\n    \"bgOpacity\",\n    \"textColor\",\n    \"textColour\",\n    \"borderColor\",\n    \"borderColour\",\n    \"borderOpacity\",\n    \"fillColor\",\n    \"fillColour\",\n    \"strokeColor\",\n    \"strokeColour\",\n    // Visual\n    \"shadow\",\n    \"shape\",\n    \"opacity\",\n    // Layout\n    \"layoutAsFlexbox\",\n    \"listVertically\",\n    \"listHorizontally\",\n    \"layoutAsGrid\",\n    \"columns\",\n    \"gap\",\n    // Margin\n    \"margin\",\n    \"horizontalMargin\",\n    \"verticalMargin\",\n    \"marginTop\",\n    \"marginRight\",\n    \"marginBottom\",\n    \"marginLeft\",\n    // Padding\n    \"padding\",\n    \"horizontalPadding\",\n    \"verticalPadding\",\n    \"paddingTop\",\n    \"paddingRight\",\n    \"paddingBottom\",\n    \"paddingLeft\",\n    // Alignment\n    \"horizontallyCentreThis\",\n    \"horizontallyCenterThis\",\n    \"verticallyCentreItems\",\n    \"verticallyCenterItems\",\n    \"pushItemsToEnds\",\n    // Sizing\n    \"isFullWidth\",\n    \"isFullHeight\",\n    // Responsive visibility\n    \"hideOnMobile\",\n    \"showOnlyOnMobile\",\n    \"hideOnTabletPortrait\",\n    \"showOnlyOnTabletPortrait\",\n    \"hideOnTabletLandscape\",\n    \"showOnlyOnTabletLandscape\",\n    \"hideOnDesktop\",\n    \"showOnlyOnDesktop\",\n    // Typography\n    \"weight\",\n    // Custom classes\n    \"classNames\",\n];\n\nexport interface WrapperInputSeparationResult<T extends Record<string, any>> {\n    wrapperProps : Partial<CommonProps>;\n    inputProps   : Omit<T, keyof CommonProps>;\n}\n\n/**\n * Separates wrapper-level props (margin, padding, layout, etc.) from input-specific props.\n *\n * Form components like TextArea and InputField wrap their input in a FormItem.\n * Layout/spacing props should be applied to FormItem (the wrapper), not the inner input.\n *\n * @param props - The props object to separate\n * @returns Object with wrapperProps (for FormItem) and inputProps (for the input element)\n *\n * @example\n * const { wrapperProps, inputProps } = separateWrapperProps(props);\n * return (\n *   <FormItem {...wrapperProps}>\n *     <Element as=\"textarea\" {...inputProps} />\n *   </FormItem>\n * );\n */\nexport const separateWrapperProps = <T extends Record<string, any>>(\n    props: T,\n): WrapperInputSeparationResult<T> => {\n    const wrapperProps: Partial<CommonProps> = {};\n    const inputProps: Record<string, any> = {};\n\n    for (const key of Object.keys(props)) {\n        if (WRAPPER_PROP_KEYS.includes(key as keyof CommonProps)) {\n            (wrapperProps as any)[key] = props[key];\n        } else {\n            inputProps[key] = props[key];\n        }\n    }\n\n    return {\n        wrapperProps,\n        inputProps: inputProps as Omit<T, keyof CommonProps>,\n    };\n};"],"names":["WRAPPER_PROP_KEYS","separateWrapperProps","props","wrapperProps","inputProps","key"],"mappings":"AA0CA,MAAMA,IAA2C;AAAA;AAAA,EAE7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AACJ,GAwBaC,IAAuB,CAChCC,MACkC;AAClC,QAAMC,IAAqC,CAAA,GACrCC,IAAkC,CAAA;AAExC,aAAWC,KAAO,OAAO,KAAKH,CAAK;AAC/B,IAAIF,EAAkB,SAASK,CAAwB,IAClDF,EAAqBE,CAAG,IAAIH,EAAMG,CAAG,IAEtCD,EAAWC,CAAG,IAAIH,EAAMG,CAAG;AAInC,SAAO;AAAA,IACH,cAAAF;AAAA,IACA,YAAAC;AAAA,EAAA;AAER;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"                 : "fictoan-react",
-    "version"              : "2.0.0-beta.18",
+    "version"              : "2.0.0-beta.19",
     "description"          : "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository"           : {
         "type" : "git",
@@ -33,7 +33,10 @@
         "build"            : "tsc && vite build && pnpm exec tsx src/scripts/generateSchema.ts",
         "build:schema"     : "pnpm exec tsx src/scripts/generateSchema.ts",
         "tree-shake"       : "agadoo",
-        "test"             : "echo \"Error: no test specified\" && exit 1",
+        "test"             : "vitest run --project unit",
+        "test:watch"       : "vitest --project unit",
+        "test:browser"     : "vitest run --project browser",
+        "test:all"         : "vitest run",
         "generate-colours" : "tsx src/scripts/generateColourClasses.ts"
     },
     "keywords"             : [
@@ -61,15 +64,21 @@
     "devDependencies"      : {
         "@csstools/postcss-color-mix-function" : "^3.0.12",
         "@fullhuman/postcss-purgecss"          : "^7.0.2",
+        "@testing-library/jest-dom"            : "^6.4.0",
+        "@testing-library/react"               : "^16.0.0",
+        "@testing-library/user-event"          : "^14.5.0",
         "@types/node"                          : "^22",
         "@types/prismjs"                       : "^1.26.4",
         "@types/react"                         : "^19",
         "@types/react-dom"                     : "^19",
         "@vitejs/plugin-react"                 : "^5.1.2",
+        "@vitest/browser"                      : "^3.2.6",
         "agadoo"                               : "^3.0.0",
         "autoprefixer"                         : "^10.4.14",
         "glob"                                 : "^10.3.10",
         "html-react-parser"                    : "^5.1.15",
+        "jsdom"                                : "^25.0.0",
+        "playwright"                           : "^1.49.0",
         "postcss"                              : "^8.4.30",
         "postcss-nesting"                      : "^12.0.1",
         "prismjs"                              : "^1.29.0",
@@ -83,7 +92,9 @@
         "vite"                                 : "6.4.1",
         "vite-plugin-dts"                      : "^3.6.4",
         "vite-plugin-lib-inject-css"           : "^1.3.0",
-        "vite-plugin-svgr"                     : "^4.2.0"
+        "vite-plugin-svgr"                     : "^4.2.0",
+        "vitest"                               : "^3.2.6",
+        "vitest-axe"                           : "^0.1.0"
     },
     "peerDependencies"     : {
         "prismjs"   : "^1.29.0",