@gobolt/genesis 0.2.16 → 0.2.17

package/dist/components/Input/Input.cjs

@@ -11,18 +11,20 @@ const Input = ({
   ...rest
 }) => {
   const { type, ...validRest } = rest;
-  const validSize = size === "normal" ? "middle" : size;
   const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === index ? React.cloneElement(rest.addonAfter, {
     suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {})
   }) : rest.addonAfter;
   return /* @__PURE__ */ jsxRuntime.jsx(
     styles.Input,
     {
-      size: validSize,
+      size,
       state,
       disabled: state === "disabled" || rest.disabled,
       ...validRest,
-      addonAfter
+      addonAfter,
+      style: {
+        height: size === "normal" || size === "large" ? "40px" : "32px"
+      }
     }
   );
 };

package/dist/components/Input/Input.js

@@ -10,18 +10,20 @@ const Input = ({
   ...rest
 }) => {
   const { type, ...validRest } = rest;
-  const validSize = size === "normal" ? "middle" : size;
   const addonAfter = React__default.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select ? React__default.cloneElement(rest.addonAfter, {
     suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {})
   }) : rest.addonAfter;
   return /* @__PURE__ */ jsx(
     Input$1,
     {
-      size: validSize,
+      size,
       state,
       disabled: state === "disabled" || rest.disabled,
       ...validRest,
-      addonAfter
+      addonAfter,
+      style: {
+        height: size === "normal" || size === "large" ? "40px" : "32px"
+      }
     }
   );
 };

package/dist/components/Input/styles.cjs

@@ -37,7 +37,7 @@ const getStateColors = (colors, type, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon) => {
+const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
   const stateColors = getStateColors(colors, type, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
@@ -53,6 +53,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
         font-family: 'Inter', sans-serif;
         color: ${stateColors.color};
         border-color: ${stateColors.borderColor};
+        height: ${size === "normal" || size === "large" ? "40px" : "32px !important"};
     }
 
     &.ant-input-outlined {
@@ -139,7 +140,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
   `;
 };
 const Input = styled(index$1)`
-  ${({ theme, state, type = index.TYPE.primary, ...rest }) => {
+  ${({ theme, state, type = index.TYPE.primary, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -147,7 +148,8 @@ const Input = styled(index$1)`
     type,
     state,
     hasBeforeAddon,
-    hasAfterAddon
+    hasAfterAddon,
+    size
   );
 }}
 `;

package/dist/components/Input/styles.d.ts

@@ -1,7 +1,8 @@
 import { InputProps as AntInputProps } from 'antd';
 import { STATE } from '../../constants';
-interface InputStyledProps extends AntInputProps {
+interface InputStyledProps extends Omit<AntInputProps, "size"> {
     state?: keyof typeof STATE;
+    size?: "normal" | "small" | "large";
 }
 export declare const Input: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntInputProps & import('react').RefAttributes<import('rc-input').InputRef>, "ref"> & {
     ref?: import('react').Ref<import('rc-input').InputRef>;

package/dist/components/Input/styles.js

@@ -36,7 +36,7 @@ const getStateColors = (colors, type, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon) => {
+const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
   const stateColors = getStateColors(colors, type, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
@@ -52,6 +52,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
         font-family: 'Inter', sans-serif;
         color: ${stateColors.color};
         border-color: ${stateColors.borderColor};
+        height: ${size === "normal" || size === "large" ? "40px" : "32px !important"};
     }
 
     &.ant-input-outlined {
@@ -138,7 +139,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
   `;
 };
 const Input = styled(Input$1)`
-  ${({ theme, state, type = TYPE.primary, ...rest }) => {
+  ${({ theme, state, type = TYPE.primary, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -146,7 +147,8 @@ const Input = styled(Input$1)`
     type,
     state,
     hasBeforeAddon,
-    hasAfterAddon
+    hasAfterAddon,
+    size
   );
 }}
 `;

package/dist/components/Select/Select.cjs

@@ -11,6 +11,7 @@ const Select = ({
   variant = "none",
   defaultValue,
   onChange,
+  size = "normal",
   ...rest
 }) => {
   const { breakpoint } = useGenesis.useGenesis();
@@ -33,6 +34,7 @@ const Select = ({
     styles.Select,
     {
       ...rest,
+      size,
       defaultValue,
       $variant: variant,
       suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),

package/dist/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { TYPE, STATE } from '../../constants';
 import { SelectProps as AntSelectProps } from 'antd';
-export interface SelectProps extends Omit<AntSelectProps, "variant"> {
+export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
     type?: keyof typeof TYPE;
     state?: keyof typeof STATE;
     options?: {
@@ -11,6 +11,7 @@ export interface SelectProps extends Omit<AntSelectProps, "variant"> {
     variant?: "simple" | "none";
     defaultValue?: string | string[] | number | number[] | unknown;
     onChange?: (value: string | string[]) => void;
+    size?: "normal" | "small" | "large";
 }
-declare const Select: ({ type, state, variant, defaultValue, onChange, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ type, state, variant, defaultValue, onChange, size, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -10,6 +10,7 @@ const Select = ({
   variant = "none",
   defaultValue,
   onChange,
+  size = "normal",
   ...rest
 }) => {
   const { breakpoint } = useGenesis();
@@ -32,6 +33,7 @@ const Select = ({
     Select$1,
     {
       ...rest,
+      size,
       defaultValue,
       $variant: variant,
       suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),

package/dist/components/Select/styles.cjs

@@ -39,7 +39,7 @@ const getSimpleVariant = (colors, type, state, borderRadius) => {
     }
   `;
 };
-const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant) => {
+const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant, size) => {
   var _a, _b, _c, _d;
   if ($variant === "simple") {
     return getSimpleVariant(colors, type, state, borderRadius);
@@ -55,8 +55,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
 
       width: 100%; 
       min-width: 250px;
-      height: auto;
-      min-height: 32px;
+      height: ${size === "normal" || size === "large" ? "40px" : "32px"};
 
       //background-color:  ${colors[type][state].backgroundColor}
       background-color: #fff;
@@ -221,7 +220,13 @@ const SelectDropdown = styled.div`
   }
 `;
 const Select = styled(index)`
-  ${({ theme: theme2, type = "primary", state = "active", $variant = "none" }) => getGenesisClass(theme2, type, state, $variant)}
+  ${({
+  theme: theme2,
+  type = "primary",
+  state = "active",
+  $variant = "none",
+  size = "normal"
+}) => getGenesisClass(theme2, type, state, $variant, size)}
 `;
 exports.Select = Select;
 exports.SelectDropdown = SelectDropdown;

package/dist/components/Select/styles.d.ts

@@ -11,6 +11,7 @@ interface SelectWrapperProps {
     $isFocused: boolean;
     type: keyof typeof TYPE;
     variant?: "simple" | "none";
+    size?: "normal" | "small" | "large";
 }
 export declare const SelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectWrapperProps>> & string;
 export declare const getGenesisClass: ({ colors, sizing, typography, borderRadius }: {
@@ -18,7 +19,7 @@ export declare const getGenesisClass: ({ colors, sizing, typography, borderRadiu
     sizing: any;
     typography: any;
     borderRadius: any;
-}, type: any, state: any, $variant: any) => string;
+}, type: any, state: any, $variant: any, size: any) => string;
 interface SelectMenuItemProps {
     theme: GenesisTheme;
     type?: keyof typeof TYPE;
@@ -29,6 +30,7 @@ interface SelectDropdownProps {
     theme: GenesisTheme;
     type?: keyof typeof TYPE;
     state?: keyof Breakpoint;
+    size?: "normal" | "small" | "large";
 }
 export declare const SelectDropdown: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectDropdownProps>> & string;
 type StyledSelectComponent = StyledComponent<typeof AntSelect, any, StyledSelectProps & {

package/dist/components/Select/styles.js

@@ -38,7 +38,7 @@ const getSimpleVariant = (colors, type, state, borderRadius) => {
     }
   `;
 };
-const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant) => {
+const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant, size) => {
   var _a, _b, _c, _d;
   if ($variant === "simple") {
     return getSimpleVariant(colors, type, state, borderRadius);
@@ -54,8 +54,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
 
       width: 100%; 
       min-width: 250px;
-      height: auto;
-      min-height: 32px;
+      height: ${size === "normal" || size === "large" ? "40px" : "32px"};
 
       //background-color:  ${colors[type][state].backgroundColor}
       background-color: #fff;
@@ -220,7 +219,13 @@ const SelectDropdown = styled.div`
   }
 `;
 const Select = styled(Select$1)`
-  ${({ theme: theme2, type = "primary", state = "active", $variant = "none" }) => getGenesisClass(theme2, type, state, $variant)}
+  ${({
+  theme: theme2,
+  type = "primary",
+  state = "active",
+  $variant = "none",
+  size = "normal"
+}) => getGenesisClass(theme2, type, state, $variant, size)}
 `;
 export {
   Select,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",