onekijs-ui 0.9.2 → 0.15.2

package/src/components/wizard/style.ts

@@ -0,0 +1,159 @@
+import { css } from 'styled-components';
+import { alignItems, justifyContent } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import {
+  borderBottomColor,
+  borderBottomStyle,
+  borderBottomWidth,
+  borderLeftColor,
+  borderLeftStyle,
+  borderLeftWidth,
+  borderRightColor,
+  borderRightStyle,
+  borderRightWidth,
+} from '../../styles/border';
+import { display } from '../../styles/display';
+import { flexDirection, flexGrow } from '../../styles/flex';
+import { cursor } from '../../styles/interactivity';
+import { marginLeft, padding, paddingBottom, paddingLeft, paddingRight, paddingTop } from '../../styles/spacing';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize, fontWeight, lineHeight, textDecoration } from '../../styles/typography';
+import { WizardModalProps, WizardProps } from './typings';
+
+export const wizardStyle: ComponentStyle<WizardProps> = ({ layout = 'vertical', theme }) => {
+  const t = theme.wizard;
+  const stepBorderWidthFn = layout === 'horizontal' ? borderBottomWidth : borderLeftWidth;
+  const stepBorderStyleFn = layout === 'horizontal' ? borderBottomStyle : borderLeftStyle;
+  const stepBorderColorFn = layout === 'horizontal' ? borderBottomColor : borderLeftColor;
+  const wizardBorderWidthFn = layout === 'horizontal' ? borderBottomWidth : borderRightWidth;
+  const wizardBorderStyleFn = layout === 'horizontal' ? borderBottomStyle : borderRightStyle;
+  const wizardBorderColorFn = layout === 'horizontal' ? borderBottomColor : borderRightColor;
+  return css`
+    ${display('flex')}
+    ${flexDirection(layout === 'horizontal' ? 'column' : 'row')}
+    .o-wizard-step-panel {
+      ${display('flex')}
+      ${flexDirection(layout === 'horizontal' ? 'row' : 'column')}
+      ${alignItems(layout === 'horizontal' ? 'flex-end' : 'stretch')}
+      ${wizardBorderStyleFn(t.stepsBorderStyle)}
+      ${wizardBorderWidthFn(t.stepsBorderWidth)}
+      ${wizardBorderColorFn(t.stepsBorderColor)}
+      ${paddingRight(t.stepsPaddingRight)}
+      ${paddingTop(t.stepsPaddingTop)}
+      ${paddingLeft(t.stepsPaddingLeft)}
+      ${paddingBottom(t.stepsPaddingBottom)}
+      ${backgroundColor(t.stepsBgColor)}
+    }
+
+    .o-step {
+      ${paddingRight(t.paddingRight)}
+      ${paddingTop(t.paddingTop)}
+      ${paddingLeft(t.paddingLeft)}
+      ${paddingBottom(t.paddingBottom)}
+      ${stepBorderStyleFn(t.borderStyle)}
+      ${stepBorderWidthFn(t.borderWidth)}
+      ${stepBorderColorFn(t.borderColor)}
+      ${fontWeight(t.fontWeight)}
+      ${fontSize(t.fontSize)}
+      ${color(t.fontColor)}
+    }
+
+    .o-step-active {
+      ${stepBorderColorFn(t.activeBorderColor)}
+      ${color(t.activeFontColor)}
+      ${fontWeight(t.activeFontWeight)}
+      ${fontSize(t.activeFontSize)}
+      ${backgroundColor(t.activeBgColor)}
+      &.o-step-enabled {
+        ${cursor('default')}
+      }
+
+      &.o-step-warning {
+        ${stepBorderColorFn(t.warningBorderColor)}
+        ${color(t.warningFontColor)}
+        ${backgroundColor(t.warningBgColor)}
+      }
+      &.o-step-error {
+        ${stepBorderColorFn(t.errorBorderColor)}
+        ${color(t.errorFontColor)}
+        ${backgroundColor(t.errorBgColor)}
+      }
+    }
+
+    .o-step-inactive {
+      &.o-step-success,
+      &.o-step-touched {
+        ${stepBorderColorFn(t.successBorderColor)}
+        ${color(t.successFontColor)}
+      }
+      &.o-step-warning {
+        ${stepBorderColorFn(t.warningBorderColor)}
+        ${color(t.warningFontColor)}
+      }
+      &.o-step-error {
+        ${stepBorderColorFn(t.errorBorderColor)}
+        ${color(t.errorFontColor)}
+      }
+    }
+
+    .o-step-enabled {
+      ${cursor(t.cursor)}
+    }
+
+    .o-step-disabled,
+    .o-step-untouched {
+      ${cursor('default')}
+      ${stepBorderColorFn(t.disabledBorderColor)}
+      ${color(t.disabledFontColor)}
+      ${fontWeight(t.disabledFontWeight)}
+      ${fontSize(t.disabledFontSize)}
+      ${backgroundColor(t.disabledBgColor)}
+    }
+
+    .o-step-disabled {
+      ${cursor('not-allowed')}
+      ${textDecoration('line-through')}
+    }
+
+    .o-wizard-content-panel {
+      ${display('flex')}
+      ${flexDirection('column')}
+    }
+
+    .o-wizard-content {
+      ${flexGrow(1)}
+      ${padding('lg')}
+      ${paddingRight('3xl')}
+    }
+
+    .o-wizard-control {
+      ${display('flex')}
+      ${justifyContent('flex-end')}
+      ${padding('lg')}
+    }
+
+    .o-wizard-control-button {
+      ${marginLeft('sm')}
+    }
+
+    .o-wizard-title {
+      ${fontSize('2xl')}
+      ${fontWeight('light')}
+      ${color('black')}
+      ${lineHeight('4xl')}
+      ${paddingBottom('md')}
+    }
+
+    .o-step-content-title {
+      ${fontSize('2xl')}
+      ${fontWeight('light')}
+      ${color('black')}
+      ${lineHeight('4xl')}
+      ${paddingBottom('md')}
+    }
+  `;
+};
+
+export const wizardModalStyle: ComponentStyle<WizardModalProps> = () => {
+  return css``;
+};

package/src/components/wizard/typings.ts

@@ -0,0 +1,53 @@
+import { AnyFunction, FCC } from 'onekijs-framework';
+import { ReactNode } from 'react';
+import { GridSize } from '../grid/typings';
+import { ModalProps } from '../modal/typings';
+import { TabProps, TabsProps, TabsState, TabState, TabTitleProps } from '../tab/typings';
+import { WizardService } from './WizardService';
+
+export type ControlledWizardProps = WizardProps & {
+  controller: WizardService;
+};
+
+export type StepProps = TabProps & {
+  optional?: boolean;
+  showTitle?: boolean;
+};
+
+export type StepState = TabState & {
+  optional: boolean;
+};
+
+export type StepTitleProps<M extends StepState = StepState> = TabTitleProps<M> & {
+  index: number;
+};
+
+export type UseWizardController = (props: WizardProps) => WizardService;
+
+export type WizardModalProps<M extends StepState = StepState> = ModalProps & WizardProps<M>;
+
+export type WizardProps<M extends StepState = StepState> = Omit<
+  TabsProps,
+  'controller' | 'Component' | 'TitleComponent'
+> & {
+  cancelLabel?: string;
+  controller?: WizardService;
+  Component?: FCC<Omit<WizardProps, 'Component'>>;
+  doneLabel?: string;
+  forwardOnly?: boolean;
+  nextLabel?: string;
+  previousLabel?: string;
+  stepSize?: GridSize;
+  onCancel?: AnyFunction;
+  onDone?: AnyFunction;
+  onNext?: (currentStep: M, nextStep: M) => boolean;
+  onPrevious?: (currentStep: M, previousStep: M) => boolean;
+  title?: ReactNode;
+  TitleComponent?: React.FC<StepTitleProps>;
+};
+
+export type WizardState<M extends StepState = StepState> = TabsState<M> &
+  Pick<WizardProps<M>, 'onCancel' | 'onDone' | 'onNext' | 'onPrevious'> & {
+    forwardOnly?: boolean;
+    submitting?: boolean;
+  };

package/src/fonts.d.ts

@@ -0,0 +1 @@
+declare module '*.ttf';

package/src/index.ts

@@ -1,21 +1,277 @@
+export { default as Accordion } from './components/accordion';
+export { default as AccordionComponent } from './components/accordion/components/AccordionComponent';
+export { default as AccordionContainer } from './components/accordion/components/AccordionContainer';
+export { default as AccordionPanel } from './components/accordion/components/AccordionPanel';
+export { accordionStyle } from './components/accordion/style';
+export {
+  AccordionPanelProps,
+  AccordionPanelState,
+  AccordionPanelTitleProps,
+  AccordionProps,
+  AccordionState,
+} from './components/accordion/typings';
 export { default as Button } from './components/button';
+export { default as DropdownButton } from './components/button/DropdownButton';
+export { default as buttonStyle, dropdownButtonStyle } from './components/button/style';
+export { default as SubmitButton } from './components/button/SubmitButton';
+export { ButtonProps, DropDownButtonProps, SubmitButtonProps } from './components/button/typings';
+export { default as Card } from './components/card';
+export { default as CardComponent } from './components/card/components/CardComponent';
+export { default as CardTitle } from './components/card/components/CardTitle';
+export { default as FormCard } from './components/card/FormCard';
+export { cardStyle } from './components/card/style';
+export { CardProps, CardTitleProps, FormCardProps } from './components/card/typings';
+export { default as Checkbox } from './components/checkbox';
+export { default as CheckboxComponent } from './components/checkbox/components/CheckboxComponent';
+export { default as FormCheckbox } from './components/checkbox/FormCheckbox';
+export { default as checkboxStyle } from './components/checkbox/style';
+export { CheckboxProps, FormCheckboxProps } from './components/checkbox/typings';
+export { default as Dashboard } from './components/dashboard';
+export { default as DashboardBody } from './components/dashboard/components/DashboardBody';
+export { default as DashboardContainer } from './components/dashboard/components/DashboardContainer';
+export { default as DashboardFooter } from './components/dashboard/components/DashboardFooter';
+export { default as DashboardHeader } from './components/dashboard/components/DashboardHeader';
+export { default as DashboardLeft } from './components/dashboard/components/DashboardLeft';
+export { dashboardOverlayStyle, default as DashboardOverlay } from './components/dashboard/components/DashboardOverlay';
+export { default as DashboardRight } from './components/dashboard/components/DashboardRight';
+export { default as DashboardToggler } from './components/dashboard/components/DashboardToggler';
+export { DashboardService } from './components/dashboard/DashboardService';
+export { default as useDashboard } from './components/dashboard/hooks/useDashboard';
+export {
+  DashboardServiceContext,
+  default as useDashboardService,
+} from './components/dashboard/hooks/useDashboardService';
+export { DashboardStateContext, default as useDashboardState } from './components/dashboard/hooks/useDashboardState';
+export {
+  DashboardArea,
+  DashboardBodyComponentProps,
+  DashboardBodyPanel,
+  DashboardBodyPanelProps,
+  DashboardContainerProps,
+  DashboardHorizontalArea,
+  DashboardHorizontalPanel,
+  DashboardHorizontalPanelProps,
+  DashboardOverlayProps,
+  DashboardProps,
+  DashboardSize,
+  DashboardState,
+  DashboardTogglerProps,
+  DashboardVerticalArea,
+  DashboardVerticalPanel,
+  DashboardVerticalPanelProps,
+} from './components/dashboard/typings';
+export { default as Dropdown } from './components/dropdown';
+export { default as DropdownComponent } from './components/dropdown/components/DropdownComponent';
+export { default as useDropdown } from './components/dropdown/hooks/useDropdown';
+export { default as dropdownStyle } from './components/dropdown/style';
+export { default as FieldDescriptionComponent } from './components/field/components/FieldDescriptionComponent';
+export { default as FieldHelpComponent } from './components/field/components/FieldHelpComponent';
+export { default as FieldLayoutComponent } from './components/field/components/FieldLayoutComponent';
+export { default as FieldDescription } from './components/field/FieldDescription';
+export { default as FieldHelp } from './components/field/FieldHelp';
+export { default as FieldLayout } from './components/field/FieldLayout';
+export { default as useFieldLayout } from './components/field/hooks/useFieldLayout';
+export {
+  FieldComponentProps,
+  FieldDescriptionProps,
+  FieldHelpProps,
+  FieldLayoutProps,
+  UseFieldLayoutProps,
+} from './components/field/typings';
+export { default as Col } from './components/grid/Col';
+export { default as Row } from './components/grid/Row';
+export { colStyle, rowStyle } from './components/grid/style';
+export { ColProps, GridSize, RowProps } from './components/grid/typings';
+export { default as CloseAllIcon } from './components/icon/CloseAllIcon';
+export { default as CrossIcon } from './components/icon/CrossIcon';
+export { default as FileIcon } from './components/icon/FileIcon';
+export { default as FolderIcon } from './components/icon/FolderIcon';
+export { default as LoadingIcon } from './components/icon/LoadingIcon';
+export { default as MenuIcon } from './components/icon/MenuIcon';
+export { default as SearchIcon } from './components/icon/SearchIcon';
+export { default as TogglerIcon } from './components/icon/TogglerIcon';
+export { default as Input } from './components/input';
+export { default as InputComponent } from './components/input/components/InputComponent';
+export { default as FormInput } from './components/input/FormInput';
+export { FormInputProps, InputProps } from './components/input/typings';
+export { default as Label } from './components/label';
+export { default as List } from './components/list';
+export { default as ListItemComponent, ListItemContent } from './components/list/components/ListItemComponent';
+export { default as LoadingItem } from './components/list/components/LoadingItem';
+export { default as useListController } from './components/list/hooks/useListController';
+export {
+  ArrayListProps,
+  CollectionListProps,
+  ListBodyProps,
+  ListCollection,
+  ListFooterProps,
+  ListHeaderProps,
+  ListItem,
+  ListItemAdaptee,
+  ListItemAdapter,
+  ListItemHandler,
+  ListItemProps,
+  ListItems,
+  ListProps,
+  ListState,
+  ListStatus,
+  UseListOptions,
+  VirtualItem,
+} from './components/list/typings';
+export { default as Modal } from './components/modal';
+export { default as ModalComponent } from './components/modal/components/ModalComponent';
+export { modalStyle } from './components/modal/style';
+export { ModalProps } from './components/modal/typings';
+export { default as Properties } from './components/properties';
+export { default as PropertiesComponent } from './components/properties/components/PropertiesComponent';
+export { default as Property } from './components/properties/components/Property';
+export { propertiesStyle } from './components/properties/style';
+export { PropertiesContext, PropertiesList, PropertiesProps, PropertyProps } from './components/properties/typings';
 export { default as Select } from './components/select';
+export { default as ArraySelectComponent } from './components/select/components/ArraySelectComponent';
+export { default as ControllerSelectComponent } from './components/select/components/ControllerSelectComponent';
 export { default as SelectComponent } from './components/select/components/SelectComponent';
-export { default as List } from './components/list';
+export { default as SelectIconComponent } from './components/select/components/SelectIconComponent';
+export { default as SelectInputComponent } from './components/select/components/SelectInputComponent';
+export { default as SelectOptionComponent } from './components/select/components/SelectOptionComponent';
+export { default as SelectTokensComponent } from './components/select/components/SelectTokensComponent';
+export { default as FormSelect } from './components/select/FormSelect';
+export { default as useSelectController } from './components/select/hooks/useSelectController';
 export {
-  SelectAdapter,
+  FormSelectProps,
   SelectIconProps,
   SelectInputProps,
+  SelectItem,
+  SelectItemAdapter as SelectAdapter,
+  SelectOptionHandler,
   SelectOptionProps,
-  SelectOptionsProps,
+  SelectOptionSelectionHandler,
   SelectProps,
-  SelectOptionMeta,
-  SelectOptionHandler,
+  SelectTokenProps,
+  SelectTokensProps,
 } from './components/select/typings';
-
-export { theme } from './styles/theme';
-
-export * from './styles/typings';
+export { default as Tabs } from './components/tab';
+export { default as Tab } from './components/tab/components/Tab';
+export { default as TabTitle } from './components/tab/components/TabTitle';
+export {
+  ControlledTabsProps,
+  TabProps,
+  TabsProps,
+  TabsState,
+  TabState,
+  TabTitleProps,
+  UseTabsController,
+} from './components/tab/typings';
+export { default as Table } from './components/table';
+export { default as useCheckboxColumn } from './components/table/columns/useCheckboxColumn';
+export { default as useColumn } from './components/table/columns/useColumn';
+export { default as useInputColumn } from './components/table/columns/useInputColumn';
+export { default as useLinkColumn } from './components/table/columns/useLinkColumn';
+export { default as useSelectColumn } from './components/table/columns/useSelectColumn';
+export { default as FormTable } from './components/table/FormTable';
+export { default as useFormTableContext } from './components/table/hooks/useFormTableContext';
+export { default as useTableController } from './components/table/hooks/useTableController';
+export {
+  ArrayTableProps,
+  Cell,
+  CheckboxColumn,
+  ControllerTableProps,
+  FormTableContext,
+  FormTableProps,
+  InputColumn,
+  SelectColumn,
+  TableBodyCellProps,
+  TableBodyProps,
+  TableBodyRowProps,
+  TableColumn,
+  TableColumnComputedWidth,
+  TableColumnSpec,
+  TableColumnsState,
+  TableColumnWidth,
+  TableConfig,
+  TableController,
+  TableExpandedProps,
+  TableFooterCellProps,
+  TableFooterProps,
+  TableHeaderCellProps,
+  TableHeaderProps,
+  TableItem,
+  TableItemAdaptee,
+  TableItemAdapter,
+  TableItems,
+  TableNotFoundProps,
+  TableProps,
+  TableRowHandler,
+  TableSortProps,
+  TableState,
+  UseCheckboxColumnOptions,
+  UseInputColumnOptions,
+  UseLinkColumnOptions,
+  UseSelectColumnOptions,
+  UseTableOptions,
+} from './components/table/typings';
+export { default as Tag } from './components/tag';
+export { default as TagComponent } from './components/tag/components/TagComponent';
+export { tagStyle } from './components/tag/style';
+export { TagProps } from './components/tag/typings';
+export { default as Tooltip } from './components/tooltip';
+export { default as Tree } from './components/tree';
+export { default as ArrayTreeComponent } from './components/tree/components/ArrayTreeComponent';
+export { default as ControllerTreeComponent } from './components/tree/components/ControllerTreeComponent';
+export { default as TreeBodyComponent } from './components/tree/components/TreeBodyComponent';
+export { default as TreeComponent } from './components/tree/components/TreeComponent';
+export {
+  default as TreeItemComponent,
+  TreeItemContent,
+  TreeItemToggler,
+} from './components/tree/components/TreeItemComponent';
+export { default as TreeListComponent } from './components/tree/components/TreeListComponent';
+export { default as VirtualTreeBodyComponent } from './components/tree/components/VirtualTreeBodyComponent';
+export { default as VirtualTreeListComponent } from './components/tree/components/VirtualTreeListComponent';
+export { TreeConfigContext, useTreeConfig } from './components/tree/hooks/useTreeConfig';
+export { default as useTreeController } from './components/tree/hooks/useTreeController';
+export { default as useTreeInitialState } from './components/tree/hooks/useTreeInitialState';
+export { default as useTreeService, TreeServiceContext } from './components/tree/hooks/useTreeService';
+export { TreeStateContext, useTreeState } from './components/tree/hooks/useTreeState';
+export { default as TreeService } from './components/tree/TreeService';
+export {
+  ArrayTreeProps,
+  ControllerTreeProps,
+  TreeConfig,
+  TreeController,
+  TreeItem,
+  TreeItemAdaptee,
+  TreeItemAdapter,
+  TreeItemHandler,
+  TreeItemProps,
+  TreeItemToggleProps,
+  TreeListProps,
+  TreeProps,
+  TreeState,
+  UseTreeOptions,
+  VirtualTreeListProps,
+} from './components/tree/typings';
+export { default as Wizard } from './components/wizard';
+export { default as ControlledWizardComponent } from './components/wizard/components/ControlledWizardComponent';
+export { default as Step } from './components/wizard/components/Step';
+export { default as StepTitle } from './components/wizard/components/StepTitle';
+export { default as UncontrolledWizardComponent } from './components/wizard/components/UncontrolledWizardComponent';
+export { default as WizardComponent } from './components/wizard/components/WizardComponent';
+export { default as WizardContainer } from './components/wizard/components/WizardContainer';
+export { default as WizardModalComponent } from './components/wizard/components/WizardModalComponent';
+export { wizardModalStyle, wizardStyle } from './components/wizard/style';
+export {
+  ControlledWizardProps,
+  StepProps,
+  StepState,
+  StepTitleProps,
+  UseWizardController,
+  WizardModalProps,
+  WizardProps,
+  WizardState,
+} from './components/wizard/typings';
+export { default as WizardModal } from './components/wizard/WizardModal';
+export { WizardService } from './components/wizard/WizardService';
 export * from './styles/alignment';
 export * from './styles/animation';
 export * from './styles/background';
@@ -25,6 +281,7 @@ export * from './styles/effects';
 export * from './styles/flex';
 export * from './styles/fragmentation';
 export * from './styles/grid';
+export * from './styles/icon';
 export * from './styles/image';
 export * from './styles/interactivity';
 export * from './styles/list';
@@ -36,7 +293,10 @@ export * from './styles/svg';
 export * from './styles/table';
 export * from './styles/transform';
 export * from './styles/transition';
+export * from './styles/typings';
 export * from './styles/typography';
+export { baseTheme, BaseTheme } from './theme/base';
+export { tailwindPalette, tailwindTheme, TailwindTheme } from './theme/tailwind';
 export * from './utils/color';
 export * from './utils/event';
 export * from './utils/formatter';

package/src/styles/border.ts

@@ -3,7 +3,6 @@ import {
   BorderBottomLeftRadiusProperty,
   BorderBottomProperty,
   BorderBottomRightRadiusProperty,
-  BorderBottomStyleProperty,
   BorderBottomWidthProperty,
   BorderColorProperty,
   BorderImageOutsetProperty,
@@ -14,20 +13,17 @@ import {
   BorderImageWidthProperty,
   BorderLeftColorProperty,
   BorderLeftProperty,
-  BorderLeftStyleProperty,
   BorderLeftWidthProperty,
   BorderProperty,
   BorderRadiusProperty,
   BorderRightColorProperty,
   BorderRightProperty,
-  BorderRightStyleProperty,
   BorderRightWidthProperty,
   BorderStyleProperty,
   BorderTopColorProperty,
   BorderTopLeftRadiusProperty,
   BorderTopProperty,
   BorderTopRightRadiusProperty,
-  BorderTopStyleProperty,
   BorderTopWidthProperty,
   BorderWidthProperty,
   BoxShadowProperty,
@@ -85,24 +81,25 @@ export const borderTopLeftRadius = cssProperty<BorderTopLeftRadiusProperty<TLeng
   'border-top-left-radius',
   themeFormatter('radius'),
 );
-export const borderBottomRadius = cssProperty<BorderBottomLeftRadiusProperty<TLength>>(
+
+export const borderBottomLeftRadius = cssProperty<BorderBottomLeftRadiusProperty<TLength>>(
   'border-bottom-left-radius',
   themeFormatter('radius'),
 );
-export const borderLeftRadius = cssProperty<BorderTopRightRadiusProperty<TLength>>(
+export const borderTopRightRadius = cssProperty<BorderTopRightRadiusProperty<TLength>>(
   'border-top-right-radius',
   themeFormatter('radius'),
 );
-export const borderRightRadius = cssProperty<BorderBottomRightRadiusProperty<TLength>>(
+export const borderBottomRightRadius = cssProperty<BorderBottomRightRadiusProperty<TLength>>(
   'border-bottom-right-radius',
   themeFormatter('radius'),
 );
 
 export const borderStyle = cssProperty<BorderStyleProperty>('border-style');
-export const borderTopStyle = cssProperty<BorderTopStyleProperty>('border-top-style');
-export const borderBottomStyle = cssProperty<BorderBottomStyleProperty>('border-bottom-style');
-export const borderLeftStyle = cssProperty<BorderLeftStyleProperty>('border-left-style');
-export const borderRightStyle = cssProperty<BorderRightStyleProperty>('border-right-style');
+export const borderTopStyle = cssProperty<BorderStyleProperty>('border-top-style');
+export const borderBottomStyle = cssProperty<BorderStyleProperty>('border-bottom-style');
+export const borderLeftStyle = cssProperty<BorderStyleProperty>('border-left-style');
+export const borderRightStyle = cssProperty<BorderStyleProperty>('border-right-style');
 
 export const borderWidth = cssProperty<number | BorderWidthProperty<TLength>>('border-width', pxFormatter);
 export const borderTopWidth = cssProperty<number | BorderTopWidthProperty<TLength>>('border-top-width', pxFormatter);

package/src/styles/flex.ts

@@ -1,5 +1,5 @@
 import { FlexBasisProperty, FlexDirectionProperty, FlexProperty, FlexWrapProperty, Globals } from 'csstype';
-import { booleanFormatter, enumFormatter } from '../utils/formatter';
+import { enumFormatter } from '../utils/formatter';
 import { cssProperty } from '../utils/style';
 import { TLength } from './typings';
 
@@ -20,10 +20,10 @@ export const flexBasis = cssProperty<FlexBasisProperty<TLength>>('flex-basic');
 export const flexDirection = cssProperty<FlexDirectionProperty>('flex-direction');
 
 // true; false
-export const flexGrow = cssProperty<boolean>('flex-grow', booleanFormatter);
+export const flexGrow = cssProperty<number>('flex-grow');
 
 // true; false
-export const flexShrink = cssProperty<boolean>('flex-shrink', booleanFormatter);
+export const flexShrink = cssProperty<number>('flex-shrink');
 
 // nowrap; wrap; wrap-reverse;
 export const flexWrap = cssProperty<FlexWrapProperty>('flex-wrap');

package/src/styles/icon.ts

@@ -0,0 +1,14 @@
+import { FontSizeProperty } from 'csstype';
+import { themeFormatter } from '../utils/formatter';
+import { cssProperty } from '../utils/style';
+import { FontSizePropertyTheme, TLength } from './typings';
+
+export const iconWidth = cssProperty<FontSizePropertyTheme | FontSizeProperty<TLength>>(
+  'width',
+  themeFormatter('font.sizes'),
+);
+
+export const iconHeight = cssProperty<FontSizePropertyTheme | FontSizeProperty<TLength>>(
+  'height',
+  themeFormatter('font.sizes'),
+);

package/src/styles/position.ts

@@ -1,4 +1,12 @@
-import { ClearProperty, FloatProperty, LeftProperty, PositionProperty, RightProperty, TopProperty } from 'csstype';
+import {
+  ClearProperty,
+  FloatProperty,
+  LeftProperty,
+  PositionProperty,
+  RightProperty,
+  TopProperty,
+  ZIndexProperty,
+} from 'csstype';
 import { cssProperty } from '../utils/style';
 import { TLength } from './typings';
 
@@ -20,5 +28,8 @@ export const right = cssProperty<RightProperty<TLength>>('right');
 // integer
 export const top = cssProperty<TopProperty<TLength>>('top');
 
+// integer
+export const bottom = cssProperty<TopProperty<TLength>>('bottom');
+
 // auto or integer
-export const zIndex = cssProperty('z-index');
+export const zIndex = cssProperty<ZIndexProperty>('z-index');