@pantool/components 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/helpers/flex/flex.d.ts

@@ -0,0 +1,45 @@
+import { PolymorphicProps, WithBaseProps } from "../../types.js";
+import * as React from "react";
+import { PropValueWithBreakpoints } from "@pantool/lib";
+
+//#region src/helpers/flex/flex.d.ts
+type FlexProps<E extends React.ElementType = "div"> = PolymorphicProps<E, WithBaseProps<{
+  /**
+   * The variant of the flex-box.
+   *
+   * @default "block"
+   */
+  variant?: "block" | "inline";
+  /**
+   * Changes how flex-items wrap in the flex-box.
+   */
+  wrapMode?: PropValueWithBreakpoints<"nowrap" | "wrap" | "wrap-reverse">;
+  /**
+   * Sets the gap between flex-items in the flex-box.
+   */
+  gap?: PropValueWithBreakpoints<"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl">;
+  /**
+   * Sets the direction of flex-items in the flex-box.
+   */
+  direction?: PropValueWithBreakpoints<"row" | "column" | "row-reverse" | "column-reverse">;
+  /**
+   * Defines how the browser distributes space between and around content items
+   * along the main-axis of the flex-box.
+   */
+  justifyContent?: PropValueWithBreakpoints<"start" | "end" | "center" | "between" | "around" | "evenly">;
+  /**
+   * Controls the alignment of flex-items on the cross-axis in the flex-box.
+   */
+  alignItems?: PropValueWithBreakpoints<"start" | "end" | "center" | "baseline" | "stretch">;
+  /**
+   * Sets the distribution of space between and around content items
+   * along the cross-axis of the flex-box.
+   *
+   * (Note: This property has no effect on single rows of flex-items.)
+   */
+  alignContent?: PropValueWithBreakpoints<"start" | "end" | "center" | "between" | "around" | "evenly" | "stretch">;
+}>>;
+declare const Flex: <E extends React.ElementType = "div">(props: FlexProps<E>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Flex, FlexProps };
+//# sourceMappingURL=flex.d.ts.map

package/dist/helpers/flex/flex.js

@@ -0,0 +1,2 @@
+import e from"./styles.module.js";import t from"clsx";import"react";import{jsx as n}from"react/jsx-runtime";const r=r=>{let{as:i=`div`,className:a,children:o,wrapMode:s,gap:c,direction:l,justifyContent:u,alignItems:d,alignContent:f,variant:p=`block`,...m}=r;return n(i,{...m,"data-gap":c,"data-wrap-mode":s,"data-direction":l,"data-justify-content":u,"data-align-items":d,"data-align-content":f,"data-variant":p,"data-slot":`flex-root`,className:t(e.root,a),children:o})};export{r as Flex};
+//# sourceMappingURL=flex.js.map

package/dist/helpers/flex/flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.js","names":["classes"],"sources":["../../../src/helpers/flex/flex.tsx"],"sourcesContent":["import type { PropValueWithBreakpoints } from \"@pantool/lib\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport type { PolymorphicProps, WithBaseProps } from \"../../types\";\nimport classes from \"./styles.module.css\";\n\nexport type FlexProps<E extends React.ElementType = \"div\"> = PolymorphicProps<\n  E,\n  WithBaseProps<{\n    /**\n     * The variant of the flex-box.\n     *\n     * @default \"block\"\n     */\n    variant?: \"block\" | \"inline\";\n\n    /**\n     * Changes how flex-items wrap in the flex-box.\n     */\n    wrapMode?: PropValueWithBreakpoints<\"nowrap\" | \"wrap\" | \"wrap-reverse\">;\n\n    /**\n     * Sets the gap between flex-items in the flex-box.\n     */\n    gap?: PropValueWithBreakpoints<\n      \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\"\n    >;\n\n    /**\n     * Sets the direction of flex-items in the flex-box.\n     */\n    direction?: PropValueWithBreakpoints<\n      \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\n    >;\n\n    /**\n     * Defines how the browser distributes space between and around content items\n     * along the main-axis of the flex-box.\n     */\n    justifyContent?: PropValueWithBreakpoints<\n      \"start\" | \"end\" | \"center\" | \"between\" | \"around\" | \"evenly\"\n    >;\n\n    /**\n     * Controls the alignment of flex-items on the cross-axis in the flex-box.\n     */\n    alignItems?: PropValueWithBreakpoints<\n      \"start\" | \"end\" | \"center\" | \"baseline\" | \"stretch\"\n    >;\n\n    /**\n     * Sets the distribution of space between and around content items\n     * along the cross-axis of the flex-box.\n     *\n     * (Note: This property has no effect on single rows of flex-items.)\n     */\n    alignContent?: PropValueWithBreakpoints<\n      \"start\" | \"end\" | \"center\" | \"between\" | \"around\" | \"evenly\" | \"stretch\"\n    >;\n  }>\n>;\n\nexport const Flex = <E extends React.ElementType = \"div\">(\n  props: FlexProps<E>,\n) => {\n  const {\n    as: Root = \"div\",\n    className,\n    children,\n    wrapMode,\n    gap,\n    direction,\n    justifyContent,\n    alignItems,\n    alignContent,\n    variant = \"block\",\n    ...otherProps\n  } = props;\n\n  return (\n    <Root\n      {...otherProps}\n      data-gap={gap}\n      data-wrap-mode={wrapMode}\n      data-direction={direction}\n      data-justify-content={justifyContent}\n      data-align-items={alignItems}\n      data-align-content={alignContent}\n      data-variant={variant}\n      data-slot=\"flex-root\"\n      className={clsx(classes[\"root\"], className)}\n    >\n      {children}\n    </Root>\n  );\n};\n"],"mappings":"4GA8DA,MAAa,EACX,GACG,CACH,GAAM,CACJ,GAAI,EAAO,MACX,YACA,WACA,WACA,MACA,YACA,iBACA,aACA,eACA,UAAU,QACV,GAAG,GACD,EAEJ,OACE,EAAC,EAAD,CACE,GAAI,EACJ,WAAU,EACV,iBAAgB,EAChB,iBAAgB,EAChB,uBAAsB,EACtB,mBAAkB,EAClB,qBAAoB,EACpB,eAAc,EACd,YAAU,YACV,UAAW,EAAKA,EAAQ,KAAS,CAAS,EAEzC,UACG,CAAA,CAEV"}

package/dist/helpers/flex/index.d.ts

@@ -0,0 +1 @@
+import { Flex, FlexProps } from "./flex.js";

package/dist/helpers/flex/index.js

@@ -0,0 +1 @@
+import"./flex.js";

package/dist/helpers/flex/styles.css

@@ -0,0 +1 @@
+.VYIyxW_root{display:var(--display);gap:var(--gap);flex-direction:var(--direction);flex-wrap:var(--wrap-mode);justify-content:var(--justify-content);align-items:var(--align-items);align-content:var(--align-content)}.VYIyxW_root[data-variant=block]{--display:flex}.VYIyxW_root[data-variant=inline]{--display:inline-flex}.VYIyxW_root[data-gap=xxs]{--gap:var(--spacing-xxs)}.VYIyxW_root[data-gap=xs]{--gap:var(--spacing-xs)}.VYIyxW_root[data-gap=sm]{--gap:var(--spacing-sm)}.VYIyxW_root[data-gap=md]{--gap:var(--spacing-md)}.VYIyxW_root[data-gap=lg]{--gap:var(--spacing-lg)}.VYIyxW_root[data-gap=xl]{--gap:var(--spacing-xl)}.VYIyxW_root[data-gap=xxl]{--gap:var(--spacing-xxl)}.VYIyxW_root[data-direction=row]{--direction:row}.VYIyxW_root[data-direction=column]{--direction:column}.VYIyxW_root[data-direction=row-reverse]{--direction:row-reverse}.VYIyxW_root[data-direction=column-reverse]{--direction:column-reverse}.VYIyxW_root[data-wrap-mode=nowrap]{--wrap-mode:nowrap}.VYIyxW_root[data-wrap-mode=wrap]{--wrap-mode:wrap}.VYIyxW_root[data-wrap-mode=wrap-reverse]{--wrap-mode:wrap-reverse}.VYIyxW_root[data-justify-content=start]{--justify-content:flex-start}.VYIyxW_root[data-justify-content=end]{--justify-content:flex-end}.VYIyxW_root[data-justify-content=center]{--justify-content:center}.VYIyxW_root[data-justify-content=between]{--justify-content:space-between}.VYIyxW_root[data-justify-content=around]{--justify-content:space-around}.VYIyxW_root[data-justify-content=evenly]{--justify-content:space-evenly}.VYIyxW_root[data-align-items=start]{--align-items:flex-start}.VYIyxW_root[data-align-items=end]{--align-items:flex-end}.VYIyxW_root[data-align-items=center]{--align-items:center}.VYIyxW_root[data-align-items=baseline]{--align-items:baseline}.VYIyxW_root[data-align-items=stretch]{--align-items:stretch}.VYIyxW_root[data-align-content=start]{--align-content:flex-start}.VYIyxW_root[data-align-content=end]{--align-content:flex-end}.VYIyxW_root[data-align-content=center]{--align-content:center}.VYIyxW_root[data-align-content=between]{--align-content:space-between}.VYIyxW_root[data-align-content=around]{--align-content:space-around}.VYIyxW_root[data-align-content=evenly]{--align-content:space-evenly}.VYIyxW_root[data-align-content=stretch]{--align-content:stretch}

package/dist/helpers/flex/styles.module.js

@@ -0,0 +1,3 @@
+import './styles.css';
+var e={root:`VYIyxW_root`};export{e as default};
+//# sourceMappingURL=styles.module.js.map

package/dist/helpers/flex/styles.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.js","names":[],"sources":["../../../src/helpers/flex/styles.module.css"],"sourcesContent":[".root {\n  display: var(--display);\n  gap: var(--gap);\n  flex-direction: var(--direction);\n  flex-wrap: var(--wrap-mode);\n  justify-content: var(--justify-content);\n  align-items: var(--align-items);\n  align-content: var(--align-content);\n}\n\n.root[data-variant=\"block\"] {\n  --display: flex;\n}\n.root[data-variant=\"inline\"] {\n  --display: inline-flex;\n}\n\n/* gap */\n.root[data-gap=\"xxs\"] {\n  --gap: var(--spacing-xxs);\n}\n.root[data-gap=\"xs\"] {\n  --gap: var(--spacing-xs);\n}\n.root[data-gap=\"sm\"] {\n  --gap: var(--spacing-sm);\n}\n.root[data-gap=\"md\"] {\n  --gap: var(--spacing-md);\n}\n.root[data-gap=\"lg\"] {\n  --gap: var(--spacing-lg);\n}\n.root[data-gap=\"xl\"] {\n  --gap: var(--spacing-xl);\n}\n.root[data-gap=\"xxl\"] {\n  --gap: var(--spacing-xxl);\n}\n\n/* direction */\n.root[data-direction=\"row\"] {\n  --direction: row;\n}\n.root[data-direction=\"column\"] {\n  --direction: column;\n}\n.root[data-direction=\"row-reverse\"] {\n  --direction: row-reverse;\n}\n.root[data-direction=\"column-reverse\"] {\n  --direction: column-reverse;\n}\n\n/* wrap-mode */\n.root[data-wrap-mode=\"nowrap\"] {\n  --wrap-mode: nowrap;\n}\n.root[data-wrap-mode=\"wrap\"] {\n  --wrap-mode: wrap;\n}\n.root[data-wrap-mode=\"wrap-reverse\"] {\n  --wrap-mode: wrap-reverse;\n}\n\n/* justify-content */\n.root[data-justify-content=\"start\"] {\n  --justify-content: flex-start;\n}\n.root[data-justify-content=\"end\"] {\n  --justify-content: flex-end;\n}\n.root[data-justify-content=\"center\"] {\n  --justify-content: center;\n}\n.root[data-justify-content=\"between\"] {\n  --justify-content: space-between;\n}\n.root[data-justify-content=\"around\"] {\n  --justify-content: space-around;\n}\n.root[data-justify-content=\"evenly\"] {\n  --justify-content: space-evenly;\n}\n\n/* align-items */\n.root[data-align-items=\"start\"] {\n  --align-items: flex-start;\n}\n.root[data-align-items=\"end\"] {\n  --align-items: flex-end;\n}\n.root[data-align-items=\"center\"] {\n  --align-items: center;\n}\n.root[data-align-items=\"baseline\"] {\n  --align-items: baseline;\n}\n.root[data-align-items=\"stretch\"] {\n  --align-items: stretch;\n}\n\n/* align-content */\n.root[data-align-content=\"start\"] {\n  --align-content: flex-start;\n}\n.root[data-align-content=\"end\"] {\n  --align-content: flex-end;\n}\n.root[data-align-content=\"center\"] {\n  --align-content: center;\n}\n.root[data-align-content=\"between\"] {\n  --align-content: space-between;\n}\n.root[data-align-content=\"around\"] {\n  --align-content: space-around;\n}\n.root[data-align-content=\"evenly\"] {\n  --align-content: space-evenly;\n}\n.root[data-align-content=\"stretch\"] {\n  --align-content: stretch;\n}\n"],"mappings":""}

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
+import { Flex, FlexProps } from "./flex/flex.js";
 import { usePortalConfig } from "./portal/context/hooks.js";
 import { PortalConfigProvider } from "./portal/context/provider.js";
 import { Portal, PortalProps } from "./portal/portal.js";

package/dist/helpers/index.js

@@ -1 +1 @@
-import"./portal/context/hooks.js";import"./portal/context/provider.js";import"./portal/portal.js";import"./portal/index.js";
+import"./portal/context/hooks.js";import"./portal/context/provider.js";import"./portal/portal.js";import"./portal/index.js";import"./flex/flex.js";import"./flex/index.js";

package/dist/index.d.ts

@@ -17,6 +17,7 @@ import { MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, Poly
 import { Text, TextColor, TextProps, TextVariant } from "./atoms/text/text.js";
 import { Toast, ToastData, ToastProps } from "./atoms/toast/toast.js";
 import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./atoms/tooltip/tooltip.js";
+import { Flex, FlexProps } from "./helpers/flex/flex.js";
 import { usePortalConfig } from "./helpers/portal/context/hooks.js";
 import { PortalConfigProvider } from "./helpers/portal/context/provider.js";
 import { Portal, PortalProps } from "./helpers/portal/portal.js";
@@ -25,4 +26,4 @@ import { useAlertDialog } from "./providers/alert-dialog-provider/hooks.js";
 import { DialogContext, DialogProvider, DialogProviderProps, showDialog } from "./providers/dialog-provider/dialog-provider.js";
 import { useDialog } from "./providers/dialog-provider/hooks.js";
 import { ToastProvider, ToastProviderProps, toaster } from "./providers/toast-provider/toast-provider.js";
-export { AlertDialog, AlertDialogContext, AlertDialogProps, AlertDialogProvider, AlertDialogProviderProps, Button, ButtonProps, Checkbox, CheckboxProps, Collapsible, Combobox, ComboboxGroup, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Icon, IconButton, IconButtonProps, IconProps, Input, InputProps, MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, Portal, PortalConfigProvider, PortalProps, Radio, RadioGroup, RadioGroupProps, RadioProps, Switch, SwitchProps, Tabs, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, type TabsRootChangeEventDetails, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsTabValue, Text, TextColor, TextProps, TextVariant, Toast, ToastData, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, WithBaseProps, WithColorProps, WithRef, showAlertDialog, showDialog, toaster, useAlertDialog, useDialog, usePortalConfig };
+export { AlertDialog, AlertDialogContext, AlertDialogProps, AlertDialogProvider, AlertDialogProviderProps, Button, ButtonProps, Checkbox, CheckboxProps, Collapsible, Combobox, ComboboxGroup, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Flex, FlexProps, Icon, IconButton, IconButtonProps, IconProps, Input, InputProps, MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, Portal, PortalConfigProvider, PortalProps, Radio, RadioGroup, RadioGroupProps, RadioProps, Switch, SwitchProps, Tabs, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, type TabsRootChangeEventDetails, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsTabValue, Text, TextColor, TextProps, TextVariant, Toast, ToastData, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, WithBaseProps, WithColorProps, WithRef, showAlertDialog, showDialog, toaster, useAlertDialog, useDialog, usePortalConfig };

package/dist/index.js

@@ -1 +1 @@
-import{Button as e}from"./atoms/button/button.js";import{Text as t}from"./atoms/text/text.js";import{usePortalConfig as n}from"./helpers/portal/context/hooks.js";import{PortalConfigProvider as r}from"./helpers/portal/context/provider.js";import{Portal as i}from"./helpers/portal/portal.js";import{AlertDialog as a}from"./atoms/alert-dialog/alert-dialog.js";import{Icon as o}from"./atoms/icon/icon.js";import{Checkbox as s}from"./atoms/checkbox/checkbox.js";import{Collapsible as c}from"./atoms/collapsible/collapsible.js";import{Combobox as l}from"./atoms/combobox/combobox.js";import{ConditionGuard as u}from"./atoms/condition-guard/condition-guard.js";import{ContextMenu as d}from"./atoms/context-menu/context-menu.js";import{Dialog as f}from"./atoms/dialog/dialog.js";import{IconButton as p}from"./atoms/icon-button/icon-button.js";import{Input as m}from"./atoms/input/input.js";import{Radio as h,RadioGroup as g}from"./atoms/radio/radio.js";import{Switch as _}from"./atoms/switch/switch.js";import{Tabs as v,TabsList as y,TabsPanel as b,TabsTab as x}from"./atoms/tabs/tabs.js";import{Toast as S}from"./atoms/toast/toast.js";import{Tooltip as C,TooltipProvider as w}from"./atoms/tooltip/tooltip.js";import"./atoms/index.js";import"./helpers/index.js";import{AlertDialogContext as T,AlertDialogProvider as E,showAlertDialog as D}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as O}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as k,DialogProvider as A,showDialog as j}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as M}from"./providers/dialog-provider/hooks.js";import{ToastProvider as N,toaster as P}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,T as AlertDialogContext,E as AlertDialogProvider,e as Button,s as Checkbox,c as Collapsible,l as Combobox,u as ConditionGuard,d as ContextMenu,f as Dialog,k as DialogContext,A as DialogProvider,o as Icon,p as IconButton,m as Input,i as Portal,r as PortalConfigProvider,h as Radio,g as RadioGroup,_ as Switch,v as Tabs,y as TabsList,b as TabsPanel,x as TabsTab,t as Text,S as Toast,N as ToastProvider,C as Tooltip,w as TooltipProvider,D as showAlertDialog,j as showDialog,P as toaster,O as useAlertDialog,M as useDialog,n as usePortalConfig};
+import{Button as e}from"./atoms/button/button.js";import{Text as t}from"./atoms/text/text.js";import{usePortalConfig as n}from"./helpers/portal/context/hooks.js";import{PortalConfigProvider as r}from"./helpers/portal/context/provider.js";import{Portal as i}from"./helpers/portal/portal.js";import{AlertDialog as a}from"./atoms/alert-dialog/alert-dialog.js";import{Icon as o}from"./atoms/icon/icon.js";import{Checkbox as s}from"./atoms/checkbox/checkbox.js";import{Collapsible as c}from"./atoms/collapsible/collapsible.js";import{Combobox as l}from"./atoms/combobox/combobox.js";import{ConditionGuard as u}from"./atoms/condition-guard/condition-guard.js";import{ContextMenu as d}from"./atoms/context-menu/context-menu.js";import{Dialog as f}from"./atoms/dialog/dialog.js";import{IconButton as p}from"./atoms/icon-button/icon-button.js";import{Input as m}from"./atoms/input/input.js";import{Radio as h,RadioGroup as g}from"./atoms/radio/radio.js";import{Switch as _}from"./atoms/switch/switch.js";import{Tabs as v,TabsList as y,TabsPanel as b,TabsTab as x}from"./atoms/tabs/tabs.js";import{Toast as S}from"./atoms/toast/toast.js";import{Tooltip as C,TooltipProvider as w}from"./atoms/tooltip/tooltip.js";import"./atoms/index.js";import{Flex as T}from"./helpers/flex/flex.js";import"./helpers/index.js";import{AlertDialogContext as E,AlertDialogProvider as D,showAlertDialog as O}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as k}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as A,DialogProvider as j,showDialog as M}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as N}from"./providers/dialog-provider/hooks.js";import{ToastProvider as P,toaster as F}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,E as AlertDialogContext,D as AlertDialogProvider,e as Button,s as Checkbox,c as Collapsible,l as Combobox,u as ConditionGuard,d as ContextMenu,f as Dialog,A as DialogContext,j as DialogProvider,T as Flex,o as Icon,p as IconButton,m as Input,i as Portal,r as PortalConfigProvider,h as Radio,g as RadioGroup,_ as Switch,v as Tabs,y as TabsList,b as TabsPanel,x as TabsTab,t as Text,S as Toast,P as ToastProvider,C as Tooltip,w as TooltipProvider,O as showAlertDialog,M as showDialog,F as toaster,k as useAlertDialog,N as useDialog,n as usePortalConfig};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pantool/components",
   "description": "TODO:",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "type": "module",
   "files": [
     "dist/**/*.js",