@gnist/design-system 0.1.0

package/dist/components/inputs/shared-styles/iconButtonOverlay.css.cjs

@@ -0,0 +1,41 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const recipes = require("@vanilla-extract/recipes");
+const iconButtonOverlayRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      width: "l",
+      height: "l"
+    }),
+    {
+      position: "absolute",
+      border: "none",
+      zIndex: 20,
+      background: "transparent",
+      cursor: "pointer",
+      top: 0
+    }
+  ],
+  variants: {
+    density: {
+      default: atoms_css_js.atoms({ marginTop: "s" }),
+      compact: atoms_css_js.atoms({ marginTop: "xs" })
+    },
+    placement: {
+      left: {
+        left: tokens_css_js.tokens.spacing.s
+      },
+      right: {
+        right: tokens_css_js.tokens.spacing.s
+      }
+    }
+  },
+  defaultVariants: {
+    density: "default",
+    placement: "left"
+  }
+});
+exports.iconButtonOverlayRecipe = iconButtonOverlayRecipe;

package/dist/components/inputs/shared-styles/iconButtonOverlay.css.d.ts

@@ -0,0 +1,15 @@
+export declare const iconButtonOverlayRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string;
+        compact: string;
+    };
+    placement: {
+        left: {
+            left: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        right: {
+            right: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+//# sourceMappingURL=iconButtonOverlay.css.d.ts.map

package/dist/components/inputs/shared-styles/iconButtonOverlay.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButtonOverlay.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/iconButtonOverlay.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;EAiClC,CAAC"}

package/dist/components/inputs/shared-styles/iconButtonOverlay.css.js

@@ -0,0 +1,41 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { recipe } from "@vanilla-extract/recipes";
+const iconButtonOverlayRecipe = recipe({
+  base: [
+    atoms({
+      width: "l",
+      height: "l"
+    }),
+    {
+      position: "absolute",
+      border: "none",
+      zIndex: 20,
+      background: "transparent",
+      cursor: "pointer",
+      top: 0
+    }
+  ],
+  variants: {
+    density: {
+      default: atoms({ marginTop: "s" }),
+      compact: atoms({ marginTop: "xs" })
+    },
+    placement: {
+      left: {
+        left: tokens.spacing.s
+      },
+      right: {
+        right: tokens.spacing.s
+      }
+    }
+  },
+  defaultVariants: {
+    density: "default",
+    placement: "left"
+  }
+});
+export {
+  iconButtonOverlayRecipe
+};

package/dist/components/inputs/shared-styles/inputField.css.cjs

@@ -0,0 +1,150 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
+const inputFieldConstants_css = require("./inputFieldConstants.css.cjs");
+const borderStyle = (borderColor, isFocused) => `0 0 0 ${isFocused ? tokens_css_js.tokens.stroke.medium : tokens_css_js.tokens.stroke.small} ${borderColor}`;
+const textAreaHeight = cssUtils.calc(cssUtils.calc(inputFieldConstants_css.visibleLines).multiply("1.5rem")).add(cssUtils.calc(tokens_css_js.tokens.spacing.xxs).multiply(2)).toString();
+const wrapperStyle = css.style({
+  position: "relative",
+  display: "inline-block",
+  minWidth: "min(100%, 280px)"
+});
+const inputFieldWrapperRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      marginTop: "xxs",
+      typography: "body-medium",
+      backgroundColor: "surface",
+      borderRadius: "input"
+    }),
+    {
+      boxShadow: borderStyle(tokens_css_js.tokens.color.outline),
+      width: "100%",
+      position: "relative",
+      boxSizing: "border-box",
+      display: "flex",
+      transitionProperty: "box-shadow",
+      transitionDuration: inputFieldConstants_css.transitionTime,
+      selectors: {
+        "&:focus-within": {
+          boxShadow: borderStyle(tokens_css_js.tokens.color.interactive, true)
+        }
+      }
+    }
+  ],
+  variants: {
+    density: {
+      default: [
+        atoms_css_js.atoms({
+          height: "xxl",
+          paddingTop: "xxs",
+          paddingBottom: "xxs"
+        })
+      ],
+      compact: [
+        atoms_css_js.atoms({
+          height: "xl",
+          paddingTop: "base",
+          paddingBottom: "base"
+        })
+      ]
+    },
+    disabled: {
+      true: [
+        atoms_css_js.atoms({ backgroundColor: "disabled" }),
+        {
+          boxShadow: borderStyle(tokens_css_js.tokens.color.disabled)
+        }
+      ]
+    },
+    fieldType: {
+      textArea: {
+        height: textAreaHeight
+      }
+    },
+    validityType: {
+      error: {
+        boxShadow: borderStyle(tokens_css_js.tokens.color.error),
+        selectors: {
+          "&:focus-within": {
+            boxShadow: borderStyle(tokens_css_js.tokens.color.error, true)
+          }
+        }
+      },
+      success: {
+        boxShadow: borderStyle(tokens_css_js.tokens.color.success),
+        selectors: {
+          "&:focus-within": {
+            boxShadow: borderStyle(tokens_css_js.tokens.color.success, true)
+          }
+        }
+      },
+      none: {}
+    }
+  },
+  defaultVariants: {
+    density: "default",
+    validityType: "none"
+  }
+});
+const inputFieldStyle = css.style([
+  atoms_css_js.atoms({ color: "on-surface" }),
+  {
+    boxSizing: "border-box",
+    all: "unset",
+    width: "100%",
+    flexGrow: 1,
+    position: "relative",
+    zIndex: 2,
+    backgroundColor: "transparent",
+    height: "100%",
+    transitionProperty: "color",
+    transitionDuration: inputFieldConstants_css.transitionTime,
+    paddingLeft: cssUtils.calc(tokens_css_js.tokens.spacing.s).add(inputFieldConstants_css.preInputWidth).toString(),
+    paddingRight: cssUtils.calc(tokens_css_js.tokens.spacing.s).add(inputFieldConstants_css.postInputWidth).toString(),
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
+    cursor: "text",
+    selectors: {
+      "&:disabled": {
+        cursor: "default",
+        color: tokens_css_js.tokens.color["on-disabled"]
+      }
+    }
+  }
+]);
+const inputContentWrapper = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      paddingLeft: "s",
+      paddingRight: "s",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }),
+    {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0
+    }
+  ],
+  variants: {
+    density: {
+      default: atoms_css_js.atoms({ height: "xxl" }),
+      compact: atoms_css_js.atoms({ height: "xl" })
+    }
+  },
+  defaultVariants: {
+    density: "default"
+  }
+});
+exports.inputContentWrapper = inputContentWrapper;
+exports.inputFieldStyle = inputFieldStyle;
+exports.inputFieldWrapperRecipe = inputFieldWrapperRecipe;
+exports.wrapperStyle = wrapperStyle;

package/dist/components/inputs/shared-styles/inputField.css.d.ts

@@ -0,0 +1,44 @@
+export declare const wrapperStyle: string;
+export declare const inputFieldWrapperRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string[];
+        compact: string[];
+    };
+    disabled: {
+        true: (string | {
+            boxShadow: string;
+        })[];
+    };
+    fieldType: {
+        textArea: {
+            height: string;
+        };
+    };
+    validityType: {
+        error: {
+            boxShadow: string;
+            selectors: {
+                "&:focus-within": {
+                    boxShadow: string;
+                };
+            };
+        };
+        success: {
+            boxShadow: string;
+            selectors: {
+                "&:focus-within": {
+                    boxShadow: string;
+                };
+            };
+        };
+        none: {};
+    };
+}>;
+export declare const inputFieldStyle: string;
+export declare const inputContentWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: string;
+        compact: string;
+    };
+}>;
+//# sourceMappingURL=inputField.css.d.ts.map

package/dist/components/inputs/shared-styles/inputField.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputField.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/inputField.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6ElC,CAAC;AAEH,eAAO,MAAM,eAAe,QAyB1B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAyB9B,CAAC"}

package/dist/components/inputs/shared-styles/inputField.css.js

@@ -0,0 +1,150 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+import { visibleLines, transitionTime, preInputWidth, postInputWidth } from "./inputFieldConstants.css.js";
+const borderStyle = (borderColor, isFocused) => `0 0 0 ${isFocused ? tokens.stroke.medium : tokens.stroke.small} ${borderColor}`;
+const textAreaHeight = calc(calc(visibleLines).multiply("1.5rem")).add(calc(tokens.spacing.xxs).multiply(2)).toString();
+const wrapperStyle = style({
+  position: "relative",
+  display: "inline-block",
+  minWidth: "min(100%, 280px)"
+});
+const inputFieldWrapperRecipe = recipe({
+  base: [
+    atoms({
+      marginTop: "xxs",
+      typography: "body-medium",
+      backgroundColor: "surface",
+      borderRadius: "input"
+    }),
+    {
+      boxShadow: borderStyle(tokens.color.outline),
+      width: "100%",
+      position: "relative",
+      boxSizing: "border-box",
+      display: "flex",
+      transitionProperty: "box-shadow",
+      transitionDuration: transitionTime,
+      selectors: {
+        "&:focus-within": {
+          boxShadow: borderStyle(tokens.color.interactive, true)
+        }
+      }
+    }
+  ],
+  variants: {
+    density: {
+      default: [
+        atoms({
+          height: "xxl",
+          paddingTop: "xxs",
+          paddingBottom: "xxs"
+        })
+      ],
+      compact: [
+        atoms({
+          height: "xl",
+          paddingTop: "base",
+          paddingBottom: "base"
+        })
+      ]
+    },
+    disabled: {
+      true: [
+        atoms({ backgroundColor: "disabled" }),
+        {
+          boxShadow: borderStyle(tokens.color.disabled)
+        }
+      ]
+    },
+    fieldType: {
+      textArea: {
+        height: textAreaHeight
+      }
+    },
+    validityType: {
+      error: {
+        boxShadow: borderStyle(tokens.color.error),
+        selectors: {
+          "&:focus-within": {
+            boxShadow: borderStyle(tokens.color.error, true)
+          }
+        }
+      },
+      success: {
+        boxShadow: borderStyle(tokens.color.success),
+        selectors: {
+          "&:focus-within": {
+            boxShadow: borderStyle(tokens.color.success, true)
+          }
+        }
+      },
+      none: {}
+    }
+  },
+  defaultVariants: {
+    density: "default",
+    validityType: "none"
+  }
+});
+const inputFieldStyle = style([
+  atoms({ color: "on-surface" }),
+  {
+    boxSizing: "border-box",
+    all: "unset",
+    width: "100%",
+    flexGrow: 1,
+    position: "relative",
+    zIndex: 2,
+    backgroundColor: "transparent",
+    height: "100%",
+    transitionProperty: "color",
+    transitionDuration: transitionTime,
+    paddingLeft: calc(tokens.spacing.s).add(preInputWidth).toString(),
+    paddingRight: calc(tokens.spacing.s).add(postInputWidth).toString(),
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
+    cursor: "text",
+    selectors: {
+      "&:disabled": {
+        cursor: "default",
+        color: tokens.color["on-disabled"]
+      }
+    }
+  }
+]);
+const inputContentWrapper = recipe({
+  base: [
+    atoms({
+      paddingLeft: "s",
+      paddingRight: "s",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }),
+    {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0
+    }
+  ],
+  variants: {
+    density: {
+      default: atoms({ height: "xxl" }),
+      compact: atoms({ height: "xl" })
+    }
+  },
+  defaultVariants: {
+    density: "default"
+  }
+});
+export {
+  inputContentWrapper,
+  inputFieldStyle,
+  inputFieldWrapperRecipe,
+  wrapperStyle
+};

package/dist/components/inputs/shared-styles/inputFieldConstants.css.cjs

@@ -0,0 +1,12 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const css = require("@vanilla-extract/css");
+const preInputWidth = css.createVar();
+const postInputWidth = css.createVar();
+const visibleLines = css.createVar();
+const transitionTime = "250ms";
+exports.postInputWidth = postInputWidth;
+exports.preInputWidth = preInputWidth;
+exports.transitionTime = transitionTime;
+exports.visibleLines = visibleLines;

package/dist/components/inputs/shared-styles/inputFieldConstants.css.d.ts

@@ -0,0 +1,5 @@
+export declare const preInputWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const postInputWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const visibleLines: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const transitionTime = "250ms";
+//# sourceMappingURL=inputFieldConstants.css.d.ts.map

package/dist/components/inputs/shared-styles/inputFieldConstants.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputFieldConstants.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/inputFieldConstants.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,oFAAc,CAAC;AACzC,eAAO,MAAM,cAAc,oFAAc,CAAC;AAC1C,eAAO,MAAM,YAAY,oFAAc,CAAC;AACxC,eAAO,MAAM,cAAc,UAAU,CAAC"}

package/dist/components/inputs/shared-styles/inputFieldConstants.css.js

@@ -0,0 +1,12 @@
+"use client";
+import { createVar } from "@vanilla-extract/css";
+const preInputWidth = createVar();
+const postInputWidth = createVar();
+const visibleLines = createVar();
+const transitionTime = "250ms";
+export {
+  postInputWidth,
+  preInputWidth,
+  transitionTime,
+  visibleLines
+};

package/dist/components/inputs/shared-styles/labelStyles.css.cjs

@@ -0,0 +1,170 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
+const inputField_css = require("./inputField.css.cjs");
+const inputFieldConstants_css = require("./inputFieldConstants.css.cjs");
+const elevatedLabel = (color) => ({
+  color: color || tokens_css_js.tokens.color["text-variant"],
+  lineHeight: "1em",
+  fontSize: tokens_css_js.tokens.typeface.size.base,
+  // TODO: check font size. replaced xs with 0.75rem
+  paddingLeft: tokens_css_js.tokens.spacing.base,
+  paddingRight: tokens_css_js.tokens.spacing.base,
+  left: cssUtils.calc(tokens_css_js.tokens.spacing.base).multiply(-1).subtract(inputFieldConstants_css.preInputWidth).toString()
+});
+const elevatedLabelBackground = (backgroundColor) => ({
+  position: "absolute",
+  backgroundColor: backgroundColor || tokens_css_js.tokens.color.surface,
+  content: "",
+  display: "block",
+  transitionProperty: "top",
+  transitionDuration: inputFieldConstants_css.transitionTime,
+  left: 0,
+  right: 0,
+  top: cssUtils.calc(tokens_css_js.tokens.spacing.xs).divide(2).toString(),
+  height: tokens_css_js.tokens.stroke.medium
+});
+const labelStyle = recipes.recipe({
+  base: {
+    zIndex: 10,
+    position: "relative",
+    transitionProperty: "color, top, left, font-size, padding",
+    transitionDuration: inputFieldConstants_css.transitionTime,
+    top: 0,
+    left: 0,
+    cursor: "text",
+    pointerEvents: "none",
+    color: tokens_css_js.tokens.color["text-variant"],
+    selectors: {
+      [`${inputField_css.inputFieldStyle}:focus + span &`]: elevatedLabel(tokens_css_js.tokens.color.interactive),
+      [`${inputField_css.inputFieldStyle}:focus-within + span &`]: elevatedLabel(tokens_css_js.tokens.color.interactive),
+      [`${inputField_css.inputFieldStyle}:focus + span &::before`]: elevatedLabelBackground("")
+    }
+  },
+  variants: {
+    density: {
+      default: {
+        selectors: {
+          [`${inputField_css.inputFieldStyle}:focus + span &`]: {
+            top: cssUtils.calc(tokens_css_js.tokens.spacing.m).multiply(-1).toString()
+          }
+        }
+      },
+      compact: {
+        selectors: {
+          [`${inputField_css.inputFieldStyle}:focus + span &`]: {
+            top: cssUtils.calc(tokens_css_js.tokens.spacing.s).multiply(-1).toString()
+          }
+        }
+      }
+    },
+    validityType: {
+      error: {
+        selectors: {
+          [`${inputField_css.inputFieldStyle}:focus + span &`]: {
+            color: tokens_css_js.tokens.color.error
+          }
+        }
+      },
+      success: {
+        selectors: {
+          [`${inputField_css.inputFieldStyle}:focus + span &`]: {
+            color: tokens_css_js.tokens.color.success
+          }
+        }
+      },
+      none: {}
+    },
+    disabled: {
+      true: atoms_css_js.atoms({ color: "on-disabled" }),
+      false: {}
+    },
+    isElevated: {
+      true: {
+        ...elevatedLabel(),
+        selectors: {
+          "&::before": elevatedLabelBackground("")
+        }
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { density: "default", isElevated: true },
+      style: {
+        top: cssUtils.calc(tokens_css_js.tokens.spacing.m).multiply(-1).toString()
+      }
+    },
+    {
+      variants: { density: "compact", isElevated: true },
+      style: {
+        top: cssUtils.calc(tokens_css_js.tokens.spacing.s).multiply(-1).toString()
+      }
+    },
+    {
+      variants: { disabled: true, isElevated: true },
+      style: {
+        ...elevatedLabel(tokens_css_js.tokens.color["on-disabled"]),
+        selectors: {
+          "&::before": elevatedLabelBackground(tokens_css_js.tokens.color.disabled)
+        }
+      }
+    },
+    {
+      variants: {
+        disabled: true,
+        isElevated: true,
+        validityType: "error"
+      },
+      style: {
+        ...elevatedLabel(tokens_css_js.tokens.color.error),
+        selectors: {
+          "&::before": elevatedLabelBackground(tokens_css_js.tokens.color.disabled)
+        }
+      }
+    },
+    {
+      variants: { validityType: "error", isElevated: true },
+      style: {
+        ...elevatedLabel(tokens_css_js.tokens.color.error),
+        selectors: {
+          "&::before": elevatedLabelBackground("")
+        }
+      }
+    },
+    {
+      variants: { validityType: "success", isElevated: true },
+      style: {
+        ...elevatedLabel(tokens_css_js.tokens.color.success),
+        selectors: {
+          "&::before": elevatedLabelBackground("")
+        }
+      }
+    },
+    {
+      variants: {
+        disabled: true,
+        validityType: "success",
+        isElevated: true
+      },
+      style: {
+        ...elevatedLabel(tokens_css_js.tokens.color.success),
+        selectors: {
+          "&::before": elevatedLabelBackground(tokens_css_js.tokens.color.disabled)
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    density: "default",
+    validityType: "none",
+    isElevated: false,
+    disabled: false
+  }
+});
+exports.labelStyle = labelStyle;