@gobolt/genesis 0.2.15 → 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/{SelectCount/SelectCount.cjs → Select/MultiSelectCount.cjs}

@@ -1,8 +1,8 @@
 "use strict";
 var jsxRuntime = require("react/jsx-runtime");
+var Select = require("./Select.cjs");
 var DropdownChevron = require("../shared/DropdownChevron.cjs");
-var Select = require("../Select/Select.cjs");
-const SelectCount = ({
+const MultiSelectCount = ({
   options,
   onChange,
   width = 320,
@@ -41,4 +41,4 @@ const SelectCount = ({
     }
   ) });
 };
-module.exports = SelectCount;
+module.exports = MultiSelectCount;

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

@@ -0,0 +1,12 @@
+export interface MultiSelectCountProps {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (values: string[]) => void;
+    width?: number;
+    selectedValues?: string[];
+    placeholder?: string;
+}
+declare const MultiSelectCount: ({ options, onChange, width, selectedValues, placeholder, }: MultiSelectCountProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectCount;

package/dist/components/{SelectCount/SelectCount.js → Select/MultiSelectCount.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import Select from "./Select.js";
 import DropdownChevron from "../shared/DropdownChevron.js";
-import Select from "../Select/Select.js";
-const SelectCount = ({
+const MultiSelectCount = ({
   options,
   onChange,
   width = 320,
@@ -41,5 +41,5 @@ const SelectCount = ({
   ) });
 };
 export {
-  SelectCount as default
+  MultiSelectCount as default
 };

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/__stories__/MultiSelectCount.stories.d.ts

@@ -0,0 +1,7 @@
+import { default as MultiSelectCount } from '../MultiSelectCount';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof MultiSelectCount>;
+export default meta;
+type Story = StoryObj<typeof MultiSelectCount>;
+export declare const Default: Story;
+export declare const ThreeSelected: Story;

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

@@ -1,2 +1,4 @@
 export { default } from './Select';
 export type { SelectProps } from './Select';
+export { default as MultiSelectCount } from './MultiSelectCount';
+export type { MultiSelectCountProps } from './MultiSelectCount';

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/dist/components/index.d.ts

@@ -47,8 +47,8 @@ export { default as SegmentedControls } from './SegmentedControls';
 export type { SegmentedControlsProps } from './SegmentedControls';
 export { default as Select } from './Select';
 export type { SelectProps } from './Select';
-export { default as SelectCount } from './SelectCount';
-export type { SelectCountProps } from './SelectCount';
+export { default as MultiSelectCount } from './Select/MultiSelectCount';
+export type { MultiSelectCountProps } from './Select/MultiSelectCount';
 export { default as Shapes } from './Shapes';
 export type { ShapesProps } from './Shapes';
 export { default as Switch } from './Switch';

package/dist/index.cjs

@@ -25,7 +25,7 @@ var RadioGroup = require("./components/Radio/RadioGroup.cjs");
 var Row = require("./components/Row/Row.cjs");
 var SegmentedControls = require("./components/SegmentedControls/SegmentedControls.cjs");
 var Select = require("./components/Select/Select.cjs");
-var SelectCount = require("./components/SelectCount/SelectCount.cjs");
+var MultiSelectCount = require("./components/Select/MultiSelectCount.cjs");
 var Shapes = require("./components/Shapes/Shapes.cjs");
 var Switch = require("./components/Switch/Switch.cjs");
 var Table = require("./components/Table/Table.cjs");
@@ -66,7 +66,7 @@ exports.RadioGroup = RadioGroup;
 exports.Row = Row;
 exports.SegmentedControls = SegmentedControls;
 exports.Select = Select;
-exports.SelectCount = SelectCount;
+exports.MultiSelectCount = MultiSelectCount;
 exports.Shapes = Shapes;
 exports.Switch = Switch;
 exports.Table = Table;

package/dist/index.js

@@ -24,7 +24,7 @@ import { default as default23 } from "./components/Radio/RadioGroup.js";
 import { default as default24 } from "./components/Row/Row.js";
 import { default as default25 } from "./components/SegmentedControls/SegmentedControls.js";
 import { default as default26 } from "./components/Select/Select.js";
-import { default as default27 } from "./components/SelectCount/SelectCount.js";
+import { default as default27 } from "./components/Select/MultiSelectCount.js";
 import { default as default28 } from "./components/Shapes/Shapes.js";
 import { default as default29 } from "./components/Switch/Switch.js";
 import { default as default30 } from "./components/Table/Table.js";
@@ -59,6 +59,7 @@ export {
   default17 as Input,
   default18 as Layout,
   default19 as Message,
+  default27 as MultiSelectCount,
   default20 as Notification,
   default21 as Popover,
   default22 as Progress,
@@ -66,7 +67,6 @@ export {
   default24 as Row,
   default25 as SegmentedControls,
   default26 as Select,
-  default27 as SelectCount,
   default28 as Shapes,
   default29 as Switch,
   default30 as Table,

package/package.json

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

package/dist/components/SelectCount/SelectCount.d.ts

@@ -1,12 +0,0 @@
-export interface SelectCountProps {
-    options: {
-        value: string;
-        label: string;
-    }[];
-    onChange: (values: string[]) => void;
-    width?: number;
-    selectedValues?: string[];
-    placeholder?: string;
-}
-declare const SelectCount: ({ options, onChange, width, selectedValues, placeholder, }: SelectCountProps) => import("react/jsx-runtime").JSX.Element;
-export default SelectCount;

package/dist/components/SelectCount/__stories__/SelectCount.stories.d.ts

@@ -1,7 +0,0 @@
-import { default as SelectCount } from '../SelectCount';
-import { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta<typeof SelectCount>;
-export default meta;
-type Story = StoryObj<typeof SelectCount>;
-export declare const Default: Story;
-export declare const ThreeSelected: Story;

package/dist/components/SelectCount/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './SelectCount';
-export type { SelectCountProps } from './SelectCount';