@gobolt/genesis 0.2.7 → 0.2.9

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/Select.d.ts

@@ -10,7 +10,7 @@ export interface SelectProps extends Omit<AntSelectProps, "variant"> {
     }[];
     variant?: "simple" | "none";
     defaultValue?: string | string[] | number | number[] | unknown;
-    onChange?: (value: string) => void;
+    onChange?: (value: string | string[]) => void;
 }
 declare const Select: ({ type, state, variant, defaultValue, onChange, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

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"),b=require("../../node_modules/antd/es/select/index.cjs"),h=a.div`
   position: relative;
   border: 2px solid transparent;
   background-color: transparent;
@@ -6,8 +6,8 @@
   padding: 1px;
   width: auto;
 
-  ${({$isFocused:e,theme:o,type:r="primary"})=>e&&`
-    border: 2px solid ${o.colors[r].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,r,t)=>`
+`,f=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};
@@ -25,15 +25,15 @@
       .ant-select-selector {
         background-color: ${e.surface.secondary};
         border-color: ${e.surface.secondary};
-        border-radius: ${t.BorderRadiusSm}px;
+        border-radius: ${r.BorderRadiusSm}px;
         margin: 0px;  
       }
     }
-  `,u=({colors:e,sizing:o,typography:r,borderRadius:t},n,i,s)=>s==="simple"?p(e,n,i,t):`
+  `,m=({colors:e,sizing:t,typography:o,borderRadius:r},n,i,g)=>{var s,d,c,l,p,u;return g==="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;
@@ -43,26 +43,42 @@
       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: ${t.BorderRadiusMd}px;
-      gap: ${o.Size2}px;
+      border-radius: ${r.BorderRadiusMd}px;
+      gap: ${t.Size2}px;
 
       .ant-select-selector {
         border-color: ${e.inputs.surface.border};
         padding-left: 4px;
         height: auto !important;
         min-height: 32px !important;
+        background-color: transparent !important;
 
         .ant-select-selection-overflow {
-          flex-wrap: wrap;
+          flex-wrap: nowrap;
           gap: 4px;
-          padding: 4px 0;
+          padding: 0;
+          height: 30px;
+          align-items: center;
         }
 
         .ant-select-selection-item {
           margin-top: 0;
           margin-bottom: 0;
+          background: transparent;
+          border: none;
+          height: 24px;
+          line-height: 24px;
+          padding-right: 0;
+        }
+
+        .ant-select-selection-overflow-item-suffix {
+          position: absolute;
+          right: 0;
+          height: 30px;
+          display: flex;
+          align-items: center;
         }
       }
 
@@ -75,8 +91,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
@@ -109,30 +125,30 @@
         }
       }
     }
-  `,m=a.div`
+  `},x=a.div`
   .ant-select-item-option {
-    transition: ${({theme:e,type:o})=>l(e)};
+    transition: ${({theme:e,type:t})=>f(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`}
@@ -151,6 +167,6 @@
   &.ant-slide-up-leave {
     animation-duration: ${({theme:e})=>`${e.motion.veryfast}s`} !important;
   }
-`,g=a(d)`
-  ${({theme:e,type:o="primary",state:r="active",$variant:t="none"})=>u(e,o,r,t)}
-`;exports.Select=g;exports.SelectDropdown=b;exports.SelectWrapper=c;exports.StyledMenuItem=m;
+`,v=a(b)`
+  ${({theme:e,type:t="primary",state:o="active",$variant:r="none"})=>m(e,t,o,r)}
+`;exports.Select=v;exports.SelectDropdown=y;exports.SelectWrapper=h;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 g 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: r = "primary" }) => e && `
-    border: 2px solid ${o.colors[r].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, r, t) => `
+`, b = (e) => `all ${e.motion.veryfast}s ease-in-out`, h = (e, t, o, r) => `
     &.ant-select {
       background-color: ${e.surface.secondary};
       border-color: ${e.surface.secondary};
@@ -27,15 +27,17 @@ const b = a.div`
       .ant-select-selector {
         background-color: ${e.surface.secondary};
         border-color: ${e.surface.secondary};
-        border-radius: ${t.BorderRadiusSm}px;
+        border-radius: ${r.BorderRadiusSm}px;
         margin: 0px;  
       }
     }
-  `, p = ({ colors: e, sizing: o, typography: r, borderRadius: t }, n, i, s) => s === "simple" ? l(e, n, i, t) : `
+  `, f = ({ colors: e, sizing: t, typography: o, borderRadius: r }, n, i, m) => {
+  var s, d, c, p, l, u;
+  return m === "simple" ? h(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;
@@ -45,26 +47,42 @@ const b = a.div`
       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: ${t.BorderRadiusMd}px;
-      gap: ${o.Size2}px;
+      border-radius: ${r.BorderRadiusMd}px;
+      gap: ${t.Size2}px;
 
       .ant-select-selector {
         border-color: ${e.inputs.surface.border};
         padding-left: 4px;
         height: auto !important;
         min-height: 32px !important;
+        background-color: transparent !important;
 
         .ant-select-selection-overflow {
-          flex-wrap: wrap;
+          flex-wrap: nowrap;
           gap: 4px;
-          padding: 4px 0;
+          padding: 0;
+          height: 30px;
+          align-items: center;
         }
 
         .ant-select-selection-item {
           margin-top: 0;
           margin-bottom: 0;
+          background: transparent;
+          border: none;
+          height: 24px;
+          line-height: 24px;
+          padding-right: 0;
+        }
+
+        .ant-select-selection-overflow-item-suffix {
+          position: absolute;
+          right: 0;
+          height: 30px;
+          display: flex;
+          align-items: center;
         }
       }
 
@@ -77,8 +95,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
@@ -111,30 +129,31 @@ const b = a.div`
         }
       }
     }
-  `, g = a.div`
+  `;
+}, y = a.div`
   .ant-select-item-option {
-    transition: ${({ theme: e, type: o }) => c(e)};
+    transition: ${({ theme: e, type: t }) => b(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;
       }
     }
   }
-`, $ = 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`}
@@ -153,12 +172,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: r = "active", $variant: t = "none" }) => p(e, o, r, t)}
+`, w = a(g)`
+  ${({ theme: e, type: t = "primary", state: o = "active", $variant: r = "none" }) => f(e, t, o, r)}
 `;
 export {
-  h as Select,
-  $ as SelectDropdown,
-  b as SelectWrapper,
-  g as StyledMenuItem
+  w as Select,
+  k as SelectDropdown,
+  v as SelectWrapper,
+  y as StyledMenuItem,
+  f as getGenesisClass
 };

package/package.json

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