gd-design-library 0.2.0 → 0.3.1

package/tokens/carousel.d.ts

@@ -1,13 +1,15 @@
-import { FlexDirection } from '../components/layout';
+import { FlexDirection } from '../types';
 export declare const carousel: {
     default: {};
     container: {
-        position: string;
-        overflow: string;
-        width: string;
-        display: string;
-        zIndex: number;
-        gap: string;
+        default: {
+            position: string;
+            overflow: string;
+            width: string;
+            display: string;
+            zIndex: number;
+            gap: string;
+        };
         variant: {
             cards: {
                 gap: string;
@@ -106,11 +108,13 @@ export declare const carousel: {
         marginTop: string;
     };
     carouselDot: {
-        width: string;
-        height: string;
-        border: string;
-        cursor: string;
-        transition: string;
+        default: {
+            width: string;
+            height: string;
+            border: string;
+            cursor: string;
+            transition: string;
+        };
         active: {
             backgroundColor: string;
             width: string;
@@ -122,9 +126,11 @@ export declare const carousel: {
         };
     };
     carouselThumbs: {
-        display: string;
-        justifyContent: string;
-        gap: string;
+        default: {
+            display: string;
+            justifyContent: string;
+            gap: string;
+        };
         vertical: {
             flexDirection: FlexDirection;
             flex: string;
@@ -136,7 +142,9 @@ export declare const carousel: {
         };
     };
     carouselThumbsViewport: {
-        overflow: string;
+        default: {
+            overflow: string;
+        };
         vertical: {
             maxHeight: string;
         };
@@ -145,6 +153,7 @@ export declare const carousel: {
         };
     };
     carouselThumbsWrapper: {
+        default: {};
         vertical: {
             display: string;
             height: string;
@@ -154,18 +163,20 @@ export declare const carousel: {
         };
     };
     carouselThumb: {
-        minWidth: string;
-        minHeight: string;
-        border: string;
-        padding: number;
-        background: string;
-        cursor: string;
-        opacity: number;
-        transition: string;
-        active: {
+        default: {
+            minWidth: string;
+            minHeight: string;
+            border: string;
+            padding: number;
+            background: string;
+            cursor: string;
             opacity: number;
+            transition: string;
+            '&:hover': {
+                opacity: number;
+            };
         };
-        '&:hover': {
+        active: {
             opacity: number;
         };
         vertical: {

package/tokens/carousel.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../constants/positioning.js"),n=require("../types/common.js"),l=require("../types/layout.js");require("react");const i=require("../utils/layout.js"),e=require("./display.js"),r=require("./cursors.js"),a=require("./colors.js"),t=require("./spacing.js"),s={default:{},container:{default:{position:"relative",overflow:"hidden",width:"100%",display:e.display.flex,zIndex:o.Z_INDEX.FIRST,gap:"1rem"},variant:{cards:{gap:"1rem"},single:{".embla__slide":{padding:0}}},layout:{horizontal:{flexDirection:"column"},vertical:{flexDirection:"row",height:"100%"}}},contentContainer:{flexDirection:"column",height:"100%",width:"100%",position:"absolute",justifyContent:i.calculateJustify("center"),alignItems:e.flexAlignItems.center,zIndex:"100"},carouselViewport:{overflow:"hidden"},carouselViewportSlideWrapper:{display:e.display.flex},carouselSlide:{flex:`${t.spacing.none} ${t.spacing.none} auto`,width:"100%",padding:t.spacing.none,"& img":{width:"100%",height:"auto",objectFit:"cover",borderRadius:t.spacing.none}},footer:{display:e.display.flex,justifyContent:i.calculateJustify("between"),alignItems:e.flexAlignItems.center},footerControls:{display:e.display.flex},contentSlide:{display:e.display.block,paddingLeft:t.spacing.sm,"&:first-child":{paddingLeft:t.spacing.none}},carouselControlsWrapper:{position:"relative"},carouselControls:{display:e.display.flex,justifyContent:i.calculateJustify("between"),alignItems:e.flexAlignItems.center,position:"absolute",top:"50%",left:t.spacing.none,transform:"translateY(-50%)",width:"100%",padding:"0.5rem 1rem",zIndex:o.Z_INDEX.HIGH},carouselArrowButton:{background:"none",border:"none",fontSize:"1.5rem",cursor:"pointer",padding:"0.25rem 0.5rem",display:e.display.flex,alignItems:e.flexAlignItems.center,justifyContent:i.calculateJustify("center"),transition:"opacity 0.3s ease","&:disabled":{opacity:"0.3",cursor:"not-allowed"}},carouselDots:{display:e.display.flex,justifyContent:i.calculateJustify("center"),gap:"0.5rem",marginTop:"1rem"},carouselDot:{default:{width:"8px",height:"8px",border:"none",cursor:r.cursors.pointer,transition:"width 0.3s ease"},active:{backgroundColor:a.colors.bg.fill.primary.default,width:"32px","&:hover":{}},nonActive:{backgroundColor:a.colors.bg.fill.disabled,"&:hover":{}}},carouselThumbs:{default:{display:e.display.flex,justifyContent:i.calculateJustify("center"),gap:"0.5rem"},vertical:{flexDirection:l.FlexDirection.Column,flex:"0 0 50px",overflowX:"hidden",alignItems:e.flexAlignItems.center},horizontal:{overflowX:"auto"}},carouselThumbsViewport:{default:{overflow:"hidden"},vertical:{maxHeight:"300px"},horizontal:{width:"200px"}},carouselThumbsWrapper:{default:{},vertical:{display:e.display.block,height:"100%"},horizontal:{display:e.display.flex}},carouselThumb:{default:{minWidth:"40px",minHeight:"40px",border:"none",padding:t.spacing.none,background:"none",cursor:r.cursors.pointer,opacity:.4,transition:"opacity 0.3s ease-in-out","&:hover":{opacity:1}},active:{opacity:1},vertical:{height:"40px"},horizontal:{marginLeft:"5px"}},controlsButton:{width:t.spacing[n.SizeVariant.Xl],height:t.spacing[n.SizeVariant.Xl],"& svg":{}},icons:{base:{width:9,height:9},controlLeft:{name:"arrowLeft"},controlRight:{name:"arrowRight"}}};exports.carousel=s;

package/tokens/chat.d.ts

@@ -15,17 +15,28 @@ export declare const chat: {
             position: string;
             width: string;
             height: string;
-            paddingLeft: string;
-            paddingRight: string;
-            '@media (min-width: 768px)': {
+            display: string;
+            flexDirection: string;
+            justifyContent: string;
+            paddingBottom: string | number;
+            gap: string | number;
+            '@media (max-width: 768px)': {
+                paddingLeft: string;
+                paddingRight: string;
+            };
+            '@media (min-width: 768px) and (max-width: 1280px)': {
+                paddingLeft: string;
+                paddingRight: string;
+            };
+            '@media (min-width: 1280px)': {
                 paddingLeft: string;
                 paddingRight: string;
             };
         };
     };
     mainHeader: {
+        minHeight: string;
         height: string;
-        maxHeight: string;
         display: string;
         overflow: string;
         alignItems: string;
@@ -51,6 +62,7 @@ export declare const chat: {
         minHeight: string;
     };
     sidebarWrapper: {
+        default: {};
         auto: {
             '@media (max-width: 768px)': {
                 position: string;
@@ -76,8 +88,8 @@ export declare const chat: {
         };
     };
     sidebarHeader: {
+        minHeight: string;
         height: string;
-        maxHeight: string;
         display: string;
         overflow: string;
         alignItems: string;

package/tokens/chat.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../types/chat.js"),i=require("./utils.js"),e=require("./colors.js"),o=require("./display.js"),d=require("./spacing.js"),a={minHeight:"56px",height:"56px",display:o.display.flex,overflow:"hidden",alignItems:o.flexAlignItems.center,padding:"0 24px",borderBottom:"1px solid",borderColor:e.colors.neutral["grey.30"]},r={position:"absolute",display:o.display.block,flexDirection:"column",left:0,top:0,right:0,bottom:0,backgroundColor:i.hexToRgba(e.colors.neutral.black,.1)},n={wrapper:{default:{display:o.display.flex,position:"relative",minHeight:"500px",height:"100%",width:"100%",overflow:"hidden"}},content:{default:{boxSizing:"border-box",position:"relative",width:"100%",height:"100%",display:o.display.flex,flexDirection:"column",justifyContent:"flex-end",paddingBottom:i.getSpacing(8),gap:i.getSpacing(4),"@media (max-width: 768px)":{paddingLeft:"24px",paddingRight:"24px"},"@media (min-width: 768px) and (max-width: 1280px)":{paddingLeft:"80px",paddingRight:"80px"},"@media (min-width: 1280px)":{paddingLeft:"260px",paddingRight:"260px"}}},mainHeader:{...a},body:{display:o.display.flex,flex:1,flexDirection:"column"},sidebar:{minWidth:"250px",maxWidth:"250px",overflow:"hidden",borderRight:"1px solid",backgroundColor:e.colors.neutral.white,borderColor:e.colors.neutral["grey.30"],flex:"0 0 250px",display:o.display.flex,flexDirection:"column",minHeight:"100%"},sidebarWrapper:{default:{},[t.ChatLayoutVariant.Auto]:{"@media (max-width: 768px)":{...r}},[t.ChatLayoutVariant.Desktop]:{},[t.ChatLayoutVariant.Drawer]:{...r}},sidebarHeader:{...a},toggleButton:{default:{height:"24px",backgroundColor:e.colors.transparent,padding:d.spacing.none,transform:"rotate(270deg)","&:hover":{backgroundColor:e.colors.transparent}},open:{transform:"rotate(90deg)"}},toggleIcon:{name:"arrowDown",fill:e.colors.neutral["grey.90"],width:24,height:24}};exports.chat=n;

package/tokens/chatbubble.d.ts

@@ -0,0 +1,50 @@
+import { FlexDirection } from '../types';
+export declare const chatbubble: {
+    default: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        display: string;
+        flexDirection: FlexDirection;
+        gap: string | number;
+        clear: string;
+        margin: string;
+    };
+    question: {
+        padding: string;
+        textAlign: string;
+        float: string;
+        backgroundColor: string;
+        minWidth: string;
+        maxWidth: string;
+    };
+    answer: {
+        padding: string | number;
+    };
+    pending: {};
+    fulfilled: {};
+    rejected: {};
+    content: {
+        default: {
+            gap: string | number;
+            display: string;
+            flexDirection: FlexDirection;
+        };
+        pending: {
+            alignItems: string;
+        };
+        fulfilled: {};
+        rejected: {};
+    };
+    actions: {
+        display: string;
+        flexDirection: FlexDirection;
+    };
+    loader: {
+        props: {
+            name: string;
+            size: string;
+            withWrapper: boolean;
+        };
+    };
+};

package/tokens/chatbubble.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../types/typography.js"),i=require("../types/layout.js"),e=require("./utils.js"),t=require("./display.js"),a=require("./colors.js"),r=require("./typography.js"),n={default:{display:t.display.flex,flexDirection:i.FlexDirection.Column,gap:e.getSpacing(2),clear:"both",margin:`${e.getSpacing(2)} 0`,...r.typography[l.TypographyVariant.Body2]},question:{padding:`${e.getSpacing(2)} ${e.getSpacing(4)}`,textAlign:"right",float:"right",backgroundColor:a.colors.bg.default,minWidth:"320px",maxWidth:"566px"},answer:{padding:e.getSpacing(4)},pending:{},fulfilled:{},rejected:{},content:{default:{gap:e.getSpacing(2),display:t.display.flex,flexDirection:i.FlexDirection.Column},pending:{alignItems:t.flexAlignItems.start},fulfilled:{},rejected:{}},actions:{display:t.display.flex,flexDirection:i.FlexDirection.Row},loader:{props:{name:"dots",size:"xs",withWrapper:!1}}};exports.chatbubble=n;

package/tokens/colors.d.ts

@@ -130,7 +130,10 @@ export declare const colors: {
         error: string;
         success: string;
         info: string;
-        link: string;
+        link: {
+            default: string;
+            hover: string;
+        };
         warning: string;
         primary: {
             default: string;

package/tokens/colors.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={transparent:"transparent",primary:{default:"#FFB800","default.80":"#F0A800","default.10":"#FFF9E9"},secondary:{default:"#53B7E8","default.80":"#35A0D6","default.10":"#DDFBFD"},neutral:{white:"#FFF",black:"#000000","grey.100":"#202020","grey.90":"#646464","grey.80":"#838383","grey.60":"#A5A5A5","grey.40":"#CECECE","grey.30":"#E5E5E5","grey.10":"#F8F7F5"},status:{red:"#D21C1C","red.80":"#BD1919","red.20":"#F7C5C5","red.10":"#FDEDED",green:"#34A853","green.80":"#1F843A","green.20":"#C9E6CA","green.10":"#E0F0E4",blue:"#0069B4","blue.80":"#00476E","blue.20":"#D1EFFD","blue.10":"#E3F6FF",orange:"#FF8700","orange.80":"#F26530","orange.20":"#FFDBB2","orange.10":"#FFE9D0"},bg:{default:"#F8F7F5",surface:"#FFF",input:{default:"#FFFFFF",disabled:"#F8F7F5"},fill:{disabled:"#E5E5E5",primary:{default:"#FFB800",hover:"#F0A800"},secondary:{default:"#FFFFFF",hover:"#FFF9E9"},error:{primary:{default:"#D21C1C",hover:"#BD1919"},secondary:{default:"#FDEDED",hover:"#F7C5C5"}},success:{primary:{default:"#34A853",hover:"#1F843A"},secondary:{default:"#EFFCF2",hover:"#C9E6CA"}},warning:{primary:{default:"#FF8700",hover:"#CD4800"},secondary:{default:"#FFE9D0",hover:"#FFDBB2"}},info:{primary:{default:"#0069B4",hover:"#00476E"},secondary:{default:"#E3F6FF",hover:"#D1EFFD"}}},toast:{success:"#EFFCF2",error:"#FDEDED",warning:"#FFF8EF",info:"#E3F6FF"}},border:{primary:{default:"#FFB800",hover:"#F0A800"},secondary:{default:"#202020",disabled:"#838383",hover:"#838383"},error:"#D21C1C",success:"#34A853",info:"#0069B4",warning:"#FF8700",default:"#E5E5E5",focus:"#0069B4"},text:{default:"#000000",active:"#202020",disabled:"#646464",title:"#000000",caption:"#ccc",error:"#BD1919",success:"#1F843A",info:"#00476E",link:{default:"#53B7E8",hover:"#278CBF"},warning:"#F26530",primary:{default:"#FFB800",hover:"#F0A800"}},icon:{primary:{default:"#646464",active:"#202020",disabled:"#838383"},success:"#34A853",info:"#0069B4",warning:"#FF8700",error:"#D21C1C"}};exports.colors=e;

package/tokens/column.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={default:{maxWidth:"100%",display:"flex"}};exports.column=e;

package/tokens/constants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=["overflow","border","minWidth","width","maxWidth","minHeight","height","maxHeight","margin","marginTop","marginRight","marginBottom","marginLeft","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","position","flexWrap","flex","flexGrow","flexShrink","flexBasis","order","gap"];exports.BOX_STYLE_PROPS=i;

package/tokens/counter.d.ts

@@ -1,4 +1,4 @@
-import { TextAlign } from '../components/core/Typography/Typography.types';
+import { TextAlign } from '../types';
 export declare const counter: {
     default: {
         display: string;

package/tokens/counter.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../types/typography.js"),t=require("./utils.js"),i=require("./display.js"),n=require("./values.js"),r={default:{display:i.display.flex,width:"140px","& input":{width:"100%",textAlign:e.TextAlign.Center}},navButton:{padding:t.getSpacing(3),borderWidth:n.values.borderThin,"&:disabled":{opacity:.5,backgroundColor:"inherit"}},icons:{plus:{name:"plus",width:14,height:14},minus:{name:"minus",width:14,height:14}}};exports.counter=r;

package/tokens/cursors.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o={default:"default",pointer:"pointer",text:"text",move:"move",wait:"wait",crosshair:"crosshair",notAllowed:"not-allowed",grab:"grab",grabbing:"grabbing",help:"help",progress:"progress",alias:"alias",zoomIn:"zoom-in",zoomOut:"zoom-out",inherit:"inherit"};exports.cursors=o;