@gobolt/genesis 0.2.6 → 0.2.8

package/dist/components/DatePicker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";const e=require("../../node_modules/antd/es/date-picker/index.cjs"),t=e;module.exports=t;
+"use strict";const r=require("react/jsx-runtime"),t=require("../../providers/useGenesis.cjs"),i=require("../../node_modules/antd/es/date-picker/index.cjs"),n=e=>{const{theme:s}=t.useGenesis();return r.jsx(i,{...e,style:{border:`1px solid ${s.colors.inputs.surface.border}`}})};module.exports=n;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 import { DatePickerProps as AntDatePickerProps } from 'antd';
-export interface DatePickerProps extends AntDatePickerProps {
-}
-declare const DatePicker: import('antd/es/date-picker').DatePickerType;
+export type DatePickerProps = AntDatePickerProps;
+declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -1,5 +1,18 @@
-import e from "../../node_modules/antd/es/date-picker/index.js";
-const r = e;
+import { jsx as o } from "react/jsx-runtime";
+import { useGenesis as t } from "../../providers/useGenesis.js";
+import s from "../../node_modules/antd/es/date-picker/index.js";
+const p = (r) => {
+  const { theme: e } = t();
+  return /* @__PURE__ */ o(
+    s,
+    {
+      ...r,
+      style: {
+        border: `1px solid ${e.colors.inputs.surface.border}`
+      }
+    }
+  );
+};
 export {
-  r as default
+  p as default
 };

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -1 +1 @@
-"use strict";const e=require("../../node_modules/antd/es/date-picker/index.cjs"),{RangePicker:t}=e,n=t;module.exports=n;
+"use strict";const r=require("react/jsx-runtime"),t=require("../../providers/useGenesis.cjs"),n=require("../../node_modules/antd/es/date-picker/index.cjs"),{RangePicker:i}=n,o=e=>{const{theme:s}=t.useGenesis();return r.jsx(i,{...e,style:{border:`1px solid ${s.colors.inputs.surface.border}`}})};module.exports=o;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,4 +1,4 @@
 import { RangePickerProps } from 'antd/es/date-picker';
 export type DateRangePickerProps = RangePickerProps;
-declare const DateRangerPicker: React.FC<DateRangePickerProps>;
+declare const DateRangerPicker: (props: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DateRangerPicker;

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,5 +1,18 @@
-import e from "../../node_modules/antd/es/date-picker/index.js";
-const { RangePicker: t } = e, r = t;
+import { jsx as t } from "react/jsx-runtime";
+import { useGenesis as o } from "../../providers/useGenesis.js";
+import s from "../../node_modules/antd/es/date-picker/index.js";
+const { RangePicker: n } = s, m = (e) => {
+  const { theme: r } = o();
+  return /* @__PURE__ */ t(
+    n,
+    {
+      ...e,
+      style: {
+        border: `1px solid ${r.colors.inputs.surface.border}`
+      }
+    }
+  );
+};
 export {
-  r as default
+  m as default
 };

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

@@ -8,3 +8,4 @@ export declare const Filled: Story;
 export declare const Focussed: Story;
 export declare const Disabled: Story;
 export declare const Simple: Story;
+export declare const MultiSelect: Story;

package/dist/components/Select/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),d=require("../../node_modules/antd/es/select/index.cjs"),c=a.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),g=require("../../node_modules/antd/es/select/index.cjs"),f=a.div`
   position: relative;
   border: 2px solid transparent;
   background-color: transparent;
@@ -6,8 +6,8 @@
   padding: 1px;
   width: auto;
 
-  ${({$isFocused:e,theme:o,type:t="primary"})=>e&&`
-    border: 2px solid ${o.colors[t].focussed.ringColor};
+  ${({$isFocused:e,theme:t,type:o="primary"})=>e&&`
+    border: 2px solid ${t.colors[o].focussed.ringColor};
     background-color: transparent;
     border-radius: 8px;
     padding: 1px;
@@ -16,7 +16,7 @@
   .ant-select-dropdown {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,l=e=>`all ${e.motion.veryfast}s ease-in-out`,p=(e,o,t,r)=>`
+`,h=e=>`all ${e.motion.veryfast}s ease-in-out`,$=(e,t,o,r)=>`
     &.ant-select {
       background-color: ${e.surface.secondary};
       border-color: ${e.surface.secondary};
@@ -29,27 +29,41 @@
         margin: 0px;  
       }
     }
-  `,u=({colors:e,sizing:o,typography:t,borderRadius:r},n,i,s)=>s==="simple"?p(e,n,i,r):`
+  `,m=({colors:e,sizing:t,typography:o,borderRadius:r},n,i,b)=>{var s,d,c,l,p,u;return b==="simple"?$(e,n,i,r):`
     &.ant-select {
-      color: ${e.input};
-      font-size: ${o.Size4}px;
-      line-height: ${o.Size6}px;
+
+      font-size: ${t.Size4}px;
+      line-height: ${t.Size6}px;
       letter-spacing: 0;
       font-weight: 400;
       border-width: 1px;
 
       width: 100%; 
       min-width: 250px;
-      height: 32px;
+      height: auto;
+      min-height: 32px;
 
-      background-color:  ${e[n][i].backgroundColor}
+      background-color:  ${((d=(s=e==null?void 0:e[n])==null?void 0:s[i])==null?void 0:d.backgroundColor)??"#fff"}
       
       border-radius: ${r.BorderRadiusMd}px;
-      gap: ${o.Size2}px;
+      gap: ${t.Size2}px;
 
       .ant-select-selector {
         border-color: ${e.inputs.surface.border};
         padding-left: 4px;
+        height: auto !important;
+        min-height: 32px !important;
+
+        .ant-select-selection-overflow {
+          flex-wrap: wrap;
+          gap: 4px;
+          padding: 4px 0;
+        }
+
+        .ant-select-selection-item {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
       }
 
       .ant-select-selection-item {
@@ -61,8 +75,8 @@
       }
 
       &:active {
-        background-color: ${e[n].pressed.backgroundColor};
-        border-color: ${e[n].pressed.borderColor};
+        background-color: ${((l=(c=e==null?void 0:e[n])==null?void 0:c.pressed)==null?void 0:l.backgroundColor)??"#fff"};
+        border-color: ${((u=(p=e==null?void 0:e[n])==null?void 0:p.pressed)==null?void 0:u.borderColor)??"#fff"};
       }
 
       // Remove focus styles
@@ -95,30 +109,30 @@
         }
       }
     }
-  `,m=a.div`
+  `},x=a.div`
   .ant-select-item-option {
-    transition: ${({theme:e,type:o})=>l(e)};
+    transition: ${({theme:e,type:t})=>h(e)};
     border-radius: 0px;
 
     &:hover {
-      background-color: ${({theme:e,type:o})=>e.colors.surface.secondary};
-      color: ${({theme:e,type:o})=>e.colors.onsurface["copy-dark"]};
+      background-color: ${({theme:e,type:t})=>e.colors.surface.secondary};
+      color: ${({theme:e,type:t})=>e.colors.onsurface["copy-dark"]};
     }
 
     &.ant-select-item-option-selected {
-      background-color: ${({theme:e,type:o})=>e.colors[o].hover.backgroundColor};
-      color: ${({theme:e,type:o})=>e.colors[o].active.color};
+      background-color: ${({theme:e,type:t})=>e.colors[t].hover.backgroundColor};
+      color: ${({theme:e,type:t})=>e.colors[t].active.color};
       font-weight: 400;
       border-radius: 0px;
 
       &:hover {
-        background-color: ${({theme:e,type:o})=>e.colors[o].hover.backgroundColor};
-        color: ${({theme:e,type:o})=>e.colors[o].hover.color};
+        background-color: ${({theme:e,type:t})=>e.colors[t].hover.backgroundColor};
+        color: ${({theme:e,type:t})=>e.colors[t].hover.color};
         border-radius: 0px;
       }
     }
   }
-`,b=a.div`
+`,y=a.div`
   .ant-select-dropdown {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
     transition: all ${({theme:e})=>`${e.motion.veryfast}s`}
@@ -137,6 +151,6 @@
   &.ant-slide-up-leave {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,g=a(d)`
-  ${({theme:e,type:o="primary",state:t="active",$variant:r="none"})=>u(e,o,t,r)}
-`;exports.Select=g;exports.SelectDropdown=b;exports.SelectWrapper=c;exports.StyledMenuItem=m;
+`,v=a(g)`
+  ${({theme:e,type:t="primary",state:o="active",$variant:r="none"})=>m(e,t,o,r)}
+`;exports.Select=v;exports.SelectDropdown=y;exports.SelectWrapper=f;exports.StyledMenuItem=x;exports.getGenesisClass=m;

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

@@ -13,6 +13,12 @@ interface SelectWrapperProps {
     variant?: "simple" | "none";
 }
 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 }: {
+    colors: any;
+    sizing: any;
+    typography: any;
+    borderRadius: any;
+}, type: any, state: any, $variant: any) => string;
 interface SelectMenuItemProps {
     theme: GenesisTheme;
     type?: keyof typeof TYPE;

package/dist/components/Select/styles.js

@@ -1,6 +1,6 @@
 import a from "styled-components";
-import d from "../../node_modules/antd/es/select/index.js";
-const b = a.div`
+import b from "../../node_modules/antd/es/select/index.js";
+const v = a.div`
   position: relative;
   border: 2px solid transparent;
   background-color: transparent;
@@ -8,8 +8,8 @@ const b = a.div`
   padding: 1px;
   width: auto;
 
-  ${({ $isFocused: e, theme: o, type: t = "primary" }) => e && `
-    border: 2px solid ${o.colors[t].focussed.ringColor};
+  ${({ $isFocused: e, theme: t, type: o = "primary" }) => e && `
+    border: 2px solid ${t.colors[o].focussed.ringColor};
     background-color: transparent;
     border-radius: 8px;
     padding: 1px;
@@ -18,7 +18,7 @@ const b = a.div`
   .ant-select-dropdown {
     animation-duration: ${({ theme: e }) => `${e.motion.veryfast}s`} !important;
   }
-`, c = (e) => `all ${e.motion.veryfast}s ease-in-out`, l = (e, o, t, r) => `
+`, g = (e) => `all ${e.motion.veryfast}s ease-in-out`, f = (e, t, o, r) => `
     &.ant-select {
       background-color: ${e.surface.secondary};
       border-color: ${e.surface.secondary};
@@ -31,27 +31,43 @@ const b = a.div`
         margin: 0px;  
       }
     }
-  `, p = ({ colors: e, sizing: o, typography: t, borderRadius: r }, n, i, s) => s === "simple" ? l(e, n, i, r) : `
+  `, h = ({ colors: e, sizing: t, typography: o, borderRadius: r }, n, i, m) => {
+  var d, s, c, p, l, u;
+  return m === "simple" ? f(e, n, i, r) : `
     &.ant-select {
-      color: ${e.input};
-      font-size: ${o.Size4}px;
-      line-height: ${o.Size6}px;
+
+      font-size: ${t.Size4}px;
+      line-height: ${t.Size6}px;
       letter-spacing: 0;
       font-weight: 400;
       border-width: 1px;
 
       width: 100%; 
       min-width: 250px;
-      height: 32px;
+      height: auto;
+      min-height: 32px;
 
-      background-color:  ${e[n][i].backgroundColor}
+      background-color:  ${((s = (d = e == null ? void 0 : e[n]) == null ? void 0 : d[i]) == null ? void 0 : s.backgroundColor) ?? "#fff"}
       
       border-radius: ${r.BorderRadiusMd}px;
-      gap: ${o.Size2}px;
+      gap: ${t.Size2}px;
 
       .ant-select-selector {
         border-color: ${e.inputs.surface.border};
         padding-left: 4px;
+        height: auto !important;
+        min-height: 32px !important;
+
+        .ant-select-selection-overflow {
+          flex-wrap: wrap;
+          gap: 4px;
+          padding: 4px 0;
+        }
+
+        .ant-select-selection-item {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
       }
 
       .ant-select-selection-item {
@@ -63,8 +79,8 @@ const b = a.div`
       }
 
       &:active {
-        background-color: ${e[n].pressed.backgroundColor};
-        border-color: ${e[n].pressed.borderColor};
+        background-color: ${((p = (c = e == null ? void 0 : e[n]) == null ? void 0 : c.pressed) == null ? void 0 : p.backgroundColor) ?? "#fff"};
+        border-color: ${((u = (l = e == null ? void 0 : e[n]) == null ? void 0 : l.pressed) == null ? void 0 : u.borderColor) ?? "#fff"};
       }
 
       // Remove focus styles
@@ -97,30 +113,31 @@ const b = a.div`
         }
       }
     }
-  `, $ = a.div`
+  `;
+}, y = a.div`
   .ant-select-item-option {
-    transition: ${({ theme: e, type: o }) => c(e)};
+    transition: ${({ theme: e, type: t }) => g(e)};
     border-radius: 0px;
 
     &:hover {
-      background-color: ${({ theme: e, type: o }) => e.colors.surface.secondary};
-      color: ${({ theme: e, type: o }) => e.colors.onsurface["copy-dark"]};
+      background-color: ${({ theme: e, type: t }) => e.colors.surface.secondary};
+      color: ${({ theme: e, type: t }) => e.colors.onsurface["copy-dark"]};
     }
 
     &.ant-select-item-option-selected {
-      background-color: ${({ theme: e, type: o }) => e.colors[o].hover.backgroundColor};
-      color: ${({ theme: e, type: o }) => e.colors[o].active.color};
+      background-color: ${({ theme: e, type: t }) => e.colors[t].hover.backgroundColor};
+      color: ${({ theme: e, type: t }) => e.colors[t].active.color};
       font-weight: 400;
       border-radius: 0px;
 
       &:hover {
-        background-color: ${({ theme: e, type: o }) => e.colors[o].hover.backgroundColor};
-        color: ${({ theme: e, type: o }) => e.colors[o].hover.color};
+        background-color: ${({ theme: e, type: t }) => e.colors[t].hover.backgroundColor};
+        color: ${({ theme: e, type: t }) => e.colors[t].hover.color};
         border-radius: 0px;
       }
     }
   }
-`, g = a.div`
+`, k = a.div`
   .ant-select-dropdown {
     animation-duration: ${({ theme: e }) => `${e.motion.veryfast}s`} !important;
     transition: all ${({ theme: e }) => `${e.motion.veryfast}s`}
@@ -139,12 +156,13 @@ const b = a.div`
   &.ant-slide-up-leave {
     animation-duration: ${({ theme: e }) => `${e.motion.veryfast}s`} !important;
   }
-`, h = a(d)`
-  ${({ theme: e, type: o = "primary", state: t = "active", $variant: r = "none" }) => p(e, o, t, r)}
+`, w = a(b)`
+  ${({ theme: e, type: t = "primary", state: o = "active", $variant: r = "none" }) => h(e, t, o, r)}
 `;
 export {
-  h as Select,
-  g as SelectDropdown,
-  b as SelectWrapper,
-  $ as StyledMenuItem
+  w as Select,
+  k as SelectDropdown,
+  v as SelectWrapper,
+  y as StyledMenuItem,
+  h as getGenesisClass
 };

package/package.json

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